CLASSROOMIO-T-27

CLASSROOMIO-T-27: Remove unused variable Merge branch 'CLASSROOMIO-T-27' of https://gitlab.com/thenextgreat/classroomio into CLASSROOMIO-T-27 CLASSROOMIO-T-27: Complete reviews functionality CLASSROOMIO-T-27: Review Render Update CLASSROOMIO-T-27: - Resolved Feedbacks CLASSROOMIO-T-27: Fixed Ratings Data CLASSROOMIO-T-27: - Added Ratings Svg - Fixed avatar_url feedback CLASSROOMIO-T-27: Import Adjustment CLASSROOMIO-T-27: Code Review CLASSROOM-T-27: Added Add Review Functionality CLASSROOMIO-T-27: - Unresolved Review - Enhance Code Redability CLASSROOMIO-T-27: Completed the delete functionality CLASSROOMIO-T-27: Hide/Show functionality CLASSROOMIO-T-27: Double Quotation Update CLASSROOMIO-T-27: Testing toggle functinality CLASSROOMIO-T-27: Added the icons CLASSROOMIO-T-27: Completion of the hide/show functionality CLASSROOMIO-T-27: Display the store data on the review page for styling CLASSROOMIO-T-27: Styling of the review component & connecting it's data CLASSROOMIO-T-27: - Add ReviewsForm - Completion of the Reviews Form Structure/Styling CLASSROOMIO-T-27: Added a reviews modal CLASSROOMIO-T-27: Logic update for review section CLASSROOMIO-T-50: Logic for overlapping reviews CLASSROOMIO-T-27: - Completion of the structure & styling with mock data. - Addition of custom ratings assets CLASSROOMIO-T-27: - Review Section Code Structure - Import Profile Picture Assets Co-authored-by: Rotimi Best <[email protected]> Co-authored-by: Tunji Adeyemi <[email protected]> Co-authored-by: tunny17 <[email protected]> Merge-request: CLASSROOMIO-MR-26 Merged-by: Best Admin <[email protected]>
2023-07-31 17:20:04 +00:00
parent 375be2f7f3
commit 7f994b5c8f
17 changed files with 538 additions and 7 deletions
@@ -1,2 +1,10 @@
 {
-}
+  "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,
+}
@@ -0,0 +1,99 @@
+<script>
+  import Save24 from 'carbon-icons-svelte/lib/Save24';
+  import Delete24 from 'carbon-icons-svelte/lib/Delete24';
+  import { Toggle } from 'carbon-components-svelte';
+  import IconButton from '../../../IconButton/index.svelte';
+  import UploadImage from '../../../UploadImage/index.svelte';
+  import TextArea from '../../../Form/TextArea.svelte';
+  import TextField from '../../../Form/TextField.svelte';
+  import { uploadAvatar } from '../../../../utils/services/courses';
+
+  export let courseId;
+  export let reviews = [];
+  export let review = {};
+  export let errors = {};
+  export let onExpand = () => {};
+
+  let avatar;
+
+  // function to delete review
+  function deleteReviewData() {
+    reviews = reviews.filter((r) => r.id !== review.id);
+  }
+
+  async function onAvatarChange(_avatar) {
+    if (!_avatar) return;
+
+    review.avatar_url = await uploadAvatar(courseId, _avatar);
+  }
+
+  $: onAvatarChange(avatar);
+</script>
+
+<div class="flex items-center flex-col w-full">
+  <UploadImage
+    bind:avatar
+    src={review.avatar_url}
+    widthHeight="w-20 h-20"
+    errorMessage={errors.avatar_url}
+  />
+
+  <TextField
+    className="mt-2 w-full"
+    labelClassName="font-normal"
+    label="Full Name"
+    placeholder=""
+    type="text"
+    bind:value={review.name}
+    errorMessage={errors.name}
+  />
+
+  <!-- Description -->
+  <TextArea
+    label="Description"
+    rows="4"
+    className="mt-2 w-full"
+    labelClassName="font-normal"
+    placeholder=""
+    bind:value={review.description}
+    errorMessage={errors.description}
+  />
+
+  <div class="flex justify-between w-full items-center mt-2">
+    <!-- Rating -->
+    <TextField
+      className="mt-2 w-20"
+      labelClassName="font-normal"
+      label="Rating"
+      type="number"
+      min={1}
+      max={5}
+      bind:value={review.rating}
+      errorMessage={errors.rating}
+    />
+
+    <!-- Toggle -->
+    <div class="w-24">
+      <Toggle labelText="Hide Review" size="sm" bind:toggled={review.hide} />
+    </div>
+  </div>
+
+  <div class="mt-8 flex justify-between items-center w-full">
+    <IconButton
+      contained={true}
+      value="delete"
+      onClick={deleteReviewData}
+      size="large"
+    >
+      <Delete24 class="carbon-icon" />
+    </IconButton>
+    <IconButton
+      contained={true}
+      value="save"
+      onClick={() => onExpand(review.id)}
+      size="large"
+    >
+      <Save24 class="carbon-icon" />
+    </IconButton>
+  </div>
+</div>
@@ -0,0 +1,144 @@
+<script>
+  import cloneDeep from 'lodash/cloneDeep';
+  import get from 'lodash/get';
+  import set from 'lodash/set';
+  import z from 'zod';
+  import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
+  import IconButton from '../../../IconButton/index.svelte';
+  import { isMobile } from '../../../../utils/store/useMobile';
+  import PrimaryButton from '../../../PrimaryButton/index.svelte';
+  import { VARIANTS } from '../../../PrimaryButton/constants';
+  import ReviewFormEditor from './ReviewFormEditor.svelte';
+  import Avatar from '../../../Avatar/index.svelte';
+  import { processErrors } from '../../../../utils/functions/validator';
+
+  export let course = {};
+
+  let reviews = get(course, 'metadata.reviews', []);
+  let reviewToExpand = null;
+  let errors = {};
+
+  function setter(value, setterKey) {
+    if (!value) return;
+
+    const _course = cloneDeep(course);
+    set(_course, setterKey, value);
+    course = _course;
+  }
+
+  function addReviewForm() {
+    const _review = {
+      id: new Date().getTime(),
+      hide: false,
+      name: '',
+      avatar_url: '',
+      rating: 1,
+      created_at: new Date().getTime(),
+      description: '',
+    };
+    reviews = [...reviews, _review];
+    reviewToExpand = _review.id;
+  }
+
+  function validateReviews(id) {
+    const review = reviews.find((r) => r.id === id);
+    const reviewSchema = z.object({
+      name: z.string().min(5, {
+        message: 'Name is too short, min of 5 character',
+        invalid_type_error: 'Must not be empty',
+      }),
+      avatar_url: z.string().min(6, {
+        message: 'Upload an image',
+        invalid_type_error: 'Must not be empty',
+      }),
+      rating: z
+        .number()
+        .min(1, {
+          message: 'Rating must be from 1-5',
+          invalid_type_error: 'Must not be empty',
+        })
+        .max(5, {
+          message: 'Rating must be from 1-5',
+          invalid_type_error: 'Must not be empty',
+        }),
+      description: z.string().min(10, {
+        message: 'Description is too short, min of 5 character',
+        invalid_type_error: 'Must not be empty',
+      }),
+    });
+
+    const { error } = reviewSchema.safeParse(review);
+    return processErrors(error);
+  }
+
+  function onExpand(id) {
+    errors = {};
+
+    if (reviewToExpand) {
+      const validationRes = validateReviews(reviewToExpand);
+      if (Object.keys(validationRes).length) {
+        errors = Object.assign(errors, validationRes);
+        return;
+      }
+    }
+
+    if (id === reviewToExpand) {
+      reviewToExpand = null;
+      return;
+    }
+
+    reviewToExpand = id;
+  }
+
+  $: setter(reviews, 'metadata.reviews');
+</script>
+
+<!-- Sections - Reviews -->
+<section id="reviews">
+  <div class="">
+    {#each reviews || [] as review}
+      <div
+        id={review.id}
+        class="relative flex items-center flex-col border border-gray-300 rounded-lg p-2 my-2.5"
+      >
+        {#if review.id !== reviewToExpand}
+          <!-- the headers -->
+          <div class="flex w-full justify-between items-center">
+            <Avatar
+              src={review.avatar_url}
+              name={review.name}
+              className="mt-1"
+            />
+            <p class="text-sm">{review.name}</p>
+
+            <IconButton
+              value="expand"
+              onClick={() => onExpand(review.id)}
+              size={$isMobile ? 'large' : 'small'}
+            >
+              <ChevronDown16 class="carbon-icon" />
+            </IconButton>
+          </div>
+        {/if}
+        <!-- the body -->
+        {#if review.id === reviewToExpand}
+          <ReviewFormEditor
+            bind:reviews
+            bind:review
+            {errors}
+            courseId={course.id}
+            {onExpand}
+          />
+        {/if}
+      </div>
+    {/each}
+
+    <!-- create reviews button -->
+    <PrimaryButton
+      label="Add Reviews"
+      variant={VARIANTS.CONTAINED}
+      onClick={addReviewForm}
+      className="w-5 rounded-md mt-8"
+    />
+  </div>
+</section>
@@ -12,6 +12,7 @@
  import DescriptionForm from './DescriptionForm.svelte';
  import PricingForm from './PricingForm.svelte';
  import GoalsForm from './GoalsForm.svelte';
+  import ReviewsForm from './ReviewsForm.svelte';
  import InstructorForm from './InstructorForm.svelte';
  import PrimaryButton from '../../../PrimaryButton/index.svelte';
  import { VARIANTS } from '../../../PrimaryButton/constants';
@@ -43,10 +44,14 @@
    },
    {
      key: 5,
-      title: 'Instructor',
+      title: 'Reviews',
    },
    {
      key: 6,
+      title: 'Instructor',
+    },
+    {
+      key: 7,
      title: 'Pricing',
    },
  ];
@@ -64,6 +69,16 @@
  function handleSectionSelect(sectionKey) {
    return () => {
      selectedSection = sections.find((section) => section.key === sectionKey);
+      if (selectedSection) {
+        const sectionId = selectedSection.title.toLowerCase();
+        const sectionEl = document.getElementById(sectionId);
+        if (sectionEl) {
+          sectionEl.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+          });
+        }
+      }
    };
  }

@@ -146,7 +161,7 @@
      <h3 class="dark:text-white">{selectedSection.title}</h3>
    </div>

-    <div class="p-2 h-4/5 overflow-y">
+    <div class="title-content p-2 overflow-y-auto">
      {#if selectedSection.key === 1}
        <HeaderForm bind:course />
      {:else if selectedSection.key === 2}
@@ -156,10 +171,18 @@
      {:else if selectedSection.key === 4}
        <GoalsForm bind:course />
      {:else if selectedSection.key === 5}
-        <InstructorForm bind:course />
+        <ReviewsForm bind:course />
      {:else if selectedSection.key === 6}
+        <InstructorForm bind:course />
+      {:else if selectedSection.key === 7}
        <PricingForm bind:course />
      {/if}
    </div>
  {/if}
 </Container>
+
+<style>
+  .title-content {
+    height: 90%;
+  }
+</style>
@@ -4,6 +4,7 @@ export const SECTION_KEYS = {
  DESCRIPTION: '#description',
  GOALS: '#goals',
  LESSONS: '#lessons',
+  REVIEWS: '#reviews',
  INSTRUCTOR: '#instructor',
 };

@@ -24,6 +25,10 @@ export const NAV_ITEMS = [
    key: SECTION_KEYS.LESSONS,
    label: 'Lessons',
  },
+  {
+    key: SECTION_KEYS.REVIEWS,
+    label: 'Reviews',
+  },
  {
    key: SECTION_KEYS.INSTRUCTOR,
    label: 'Instructor',
@@ -4,6 +4,8 @@
  import { onMount } from 'svelte';
  import pluralize from 'pluralize';
  import { stores } from '@sapper/app';
+  import dayjs from 'dayjs';
+  import relativeTime from 'dayjs/plugin/relativeTime';
  import Notebook from 'carbon-icons-svelte/lib/Notebook16/Notebook16.svelte'; //note
  import PresentationFile from 'carbon-icons-svelte/lib/PresentationFile16/PresentationFile16.svelte'; // exercise
  import Video from 'carbon-icons-svelte/lib/Video16/Video16.svelte'; //video
@@ -13,17 +15,37 @@
  import PricingSection from './components/PricingSection.svelte';
  import { getLectureNo } from '../Course/function';
  import { NAV_ITEMS } from './constants';
+  import Avatar from '../../components/Avatar/index.svelte';
  import Chip from '../Chip/index.svelte';
  import { getEmbedId } from '../../utils/functions/formatYoutubeVideo';
-  import type { Course, Lesson } from '../../utils/types';
+  import type { Course, Lesson, Review } from '../../utils/types';
+  import Modal from '../Modal/index.svelte';
+  import { reviewsModalStore } from './store';
+  import { VARIANTS } from './../PrimaryButton/constants';
+
+  dayjs.extend(relativeTime);

  export let courseData: Course = {
    id: '',
    title: '',
    description: '',
  };
+  const ratingsImg = [
+    '/images/rating-1.svg',
+    '/images/rating-2.svg',
+    '/images/rating-3.svg',
+    '/images/rating-4.svg',
+    '/images/rating-5.svg',
+  ];
+
  let lessons: Array<Lesson> = [];
+  let reviews: Review[] = [];
  let player: any;
+  let averageRating = 0;
+  let totalRatings = 0;
+
+  // initialize the expandDescription array with 'false' values for each review.
+  let expandDescription = Array(reviews.length).fill(false);

  const { page } = stores();
  // const paystackApi = paystack('');
@@ -59,6 +81,10 @@
    window.player = plyr;
  }

+  function toggleDescription(id: number) {
+    expandDescription[id] = !expandDescription[id];
+  }
+
  onMount(() => {
    window.onhashchange = locationHashChanged;
  });
@@ -67,6 +93,14 @@
  $: lessons = get(courseData, 'lessons', []);
  $: instructor = courseData?.metadata?.instructor || {};
  $: initPlyr(player, video);
+  $: {
+    reviews = get(courseData, 'metadata.reviews') || [];
+    totalRatings = reviews?.reduce(
+      (acc = 0, review) => acc + (review?.rating || 0),
+      0
+    );
+    averageRating = totalRatings / reviews?.length;
+  }
 </script>

 <svelte:head>
@@ -75,7 +109,7 @@

 <div class="w-full bg-white dark:bg-gray-800 flex flex-col items-center">
  <!-- Header Section -->
-  <header class="banner w-full flex items-center justify-center p-">
+  <header id="header" class="banner w-full flex items-center justify-center p-">
    <div
      class="md:w-5/6 w-full flex items-center justify-between flex-col-reverse md:flex-row"
    >
@@ -252,6 +286,139 @@
          {/each}
        </section>

+        <!-- Sections - Reviews -->
+        {#if reviews && reviews.length > 0}
+          <section id="reviews">
+            <h2 class="my-16 mr-0 mb-6 ml-0 font-semibold">Reviews</h2>
+            <div class="flex flex-wrap">
+              {#each reviews.slice(0, 4) as review, id}
+                {#if !review.hide}
+                  <!-- review -->
+                  <div class="flex flex-row item-start w-2/4 my-2">
+                    <!-- image container -->
+                    {#if review.avatar_url}
+                      <Avatar
+                        src={review.avatar_url}
+                        name="Avatar"
+                        className="mt-1"
+                      />
+                    {/if}
+
+                    <!-- profile content -->
+                    <div class="pl-2.5 w-11/12">
+                      <p class="mb-0.5 font-medium">{review.name}</p>
+                      <!-- ratings -->
+                      <div class="flex flex-row items-center">
+                        {#if review.rating}
+                          <img
+                            src={ratingsImg[review.rating - 1]}
+                            class="w-24 mr-4 mt-1"
+                            alt=""
+                          />
+                        {/if}
+                      </div>
+                      <div
+                        class="read-more-content mb-2"
+                        style="max-height: {expandDescription[id]
+                          ? 'none'
+                          : '50px'}"
+                      >
+                        <p class="text-sm my-2 leading-5 text-gray-600">
+                          {review.description}
+                        </p>
+                      </div>
+                      {#if !expandDescription[id] && review.description.split(' ').length > 9}
+                        <button
+                          class="underline text-blue-700 mt-2 font-normal"
+                          on:click={() => toggleDescription(id)}
+                          >See More</button
+                        >
+                      {/if}
+                      {#if expandDescription[id]}
+                        <button
+                          class="underline text-blue-700 mt-2 font-normal"
+                          on:click={() => toggleDescription(id)}
+                          >See Less</button
+                        >
+                      {/if}
+                    </div>
+                  </div>
+                {/if}
+              {/each}
+            </div>
+            {#if reviews.length > 4}
+              <PrimaryButton
+                label="See All"
+                className="w-3/12 p-4 mt-2"
+                variant={VARIANTS.OUTLINED}
+                onClick={() => ($reviewsModalStore.open = true)}
+              />
+            {/if}
+
+            <!-- Reviews Modal -->
+            <Modal
+              onClose={() => ($reviewsModalStore.open = false)}
+              bind:open={$reviewsModalStore.open}
+              width="w-9/12"
+              modalHeading="Reviews"
+            >
+              <div class="flex">
+                <!-- ratings -->
+                <div class="w-1/3">
+                  <h2 class="text-xl font-bold">
+                    {averageRating} Rating
+                  </h2>
+                  <h2 class="text-lg font-semibold mt-2">
+                    {reviews.length} Ratings
+                  </h2>
+                </div>
+                <!-- reviews -->
+                <div class="flex flex-wrap w-4/6">
+                  {#each reviews as review, id}
+                    <!-- review -->
+                    <div class="flex flex-row item-start w-full my-2">
+                      <!-- image container -->
+                      {#if review.avatar_url}
+                        <Avatar
+                          src={review.avatar_url}
+                          name={review.name}
+                          className="mt-1"
+                        />
+                      {/if}
+
+                      <!-- profile content -->
+                      <div class="pl-2.5 w-11/12">
+                        <p class="mb-0.5 font-medium">{review.name}</p>
+                        <!-- ratings -->
+                        <div class="flex flex-row">
+                          <img
+                            src="/images/rating-full.svg"
+                            alt=""
+                            class="mr-2"
+                          />
+                          <p class="text-xs text-gray-600">
+                            {dayjs(review.created_at).fromNow(true)} ago
+                          </p>
+                        </div>
+                        <div
+                          class="read-more-content mb-2"
+                          style="max-height: {expandDescription[id]
+                            ? 'none'
+                            : '50px'}"
+                        >
+                          <p class="text-sm my-2 leading-5 text-gray-600">
+                            {review.description}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  {/each}
+                </div>
+              </div>
+            </Modal>
+          </section>
+        {/if}
+
        <!-- Sections - Instructor -->
        <section id="instructor" class="mt-8 pb-10">
          <h3 class="text-2xl font-bold mt-0 mb-3">Instructor</h3>
@@ -350,4 +517,17 @@
  :global(.plyr) {
    width: 100% !important;
  }
+
+  .read-more-content {
+    max-height: 100px; /* Adjust this value to set the maximum height for the truncated content */
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+    text-overflow: ellipsis;
+  }
+
+  .read-more-button {
+    cursor: pointer;
+    color: blue;
+    text-decoration: underline;
+  }
 </style>
@@ -43,4 +43,20 @@ export const landingPageStore = writable({
    description:
      '*Learn creative skills, from absolute beginner to advanced mastery.*\nVideo School exists to help you succeed in life. Each course has been hand-tailored to teach a specific skill from photography and video to art, design and business.\n**Whether you’re trying to learn a new skill from scratch, or want to refresh your memory on something you’ve learned in the past, you’ve come to the right place.**\nEducation makes the world a better place. Make your world better with new skills!\nOur courses can be watched 24/7 wherever you are. Most are fully downloadable so you can take them with you. You can also view them on mobile devices with the Udemy mobile app.\nAll courses have a 30-day money-back guarantee so that you can check it out, make sure it’s the right course for you, and get a refund if it’s not!',
  },
+  reviews: [
+    {
+      id: 1,
+      show: true,
+      name: 'Adeyemi Adetunji',
+      avatar_url: '/logo-192.png',
+      rating: 1,
+      created_at: new Date(),
+      description:
+        'rice ventore officiis maxime laudantium recusandae sit dolor.',
+    },
+  ],
+});
+
+export const reviewsModalStore = writable({
+  open: false,
 });
@@ -17,6 +17,8 @@
  export let autoFocus = false;
  export let isRequired = false;
  export let isDisabled = false;
+  export let min = undefined;
+  export let max = undefined;
  export let errorMessage = '';
  export let helperMessage = '';
  export let autoComplete = true;
@@ -80,6 +82,8 @@
    autocomplete={autoComplete ? 'on' : 'off'}
    on:blur={onChange}
    {name}
+    {min}
+    {max}
  />
  {#if isPassword}
    <span class="password-eye">
@@ -5,6 +5,7 @@
  export let src = null;
  export let widthHeight = null;
  export let shape = 'rounded-full';
+  export let errorMessage = null;

  let fileinput;

@@ -45,6 +46,9 @@
  >
    <Camera /> <span class="ml-2">Upload Image</span>
  </p>
+  {#if errorMessage}
+    <p class="text-sm text-red-500">{errorMessage}</p>
+  {/if}

  <input
    style="display:none"
@@ -1,4 +1,6 @@
 export function toggleBodyByTheme(isDark) {
+  if (!document) return;
+
  if (isDark) {
    document.body.className = document.body.className.concat(' ', 'dark');
  } else {
@@ -80,7 +80,7 @@ export const getConfirmPasswordError = ({ password, confirmPassword }) => {
    : null;
 };

-const processErrors = (error, mapToId) => {
+export const processErrors = (error, mapToId) => {
  const errors = {};

  if (Array.isArray(error?.issues)) {
@@ -19,6 +19,7 @@ interface CourseMetadata {
    description: string;
    imgUrl: string;
  };
+  reviews?: Array<Review>;
 }

 // Generated from https://supabase-schema.vercel.app/
@@ -218,3 +219,13 @@ export interface Question_answer {
  groupmember?: Groupmember;
  submission?: Submission;
 }
+
+export interface Review {
+  id: number;
+  hide: boolean;
+  name: string;
+  avatar_url: string;
+  rating: number;
+  created_at: number;
+  description: string;
+}
@@ -0,0 +1,7 @@
+<svg width="232" height="40" viewBox="0 0 232 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.0489 2.92705C19.3483 2.00574 20.6517 2.00574 20.9511 2.92705L24.2658 13.1287C24.3996 13.5407 24.7836 13.8197 25.2168 13.8197H35.9434C36.9122 13.8197 37.3149 15.0593 36.5312 15.6287L27.8532 21.9336C27.5027 22.1883 27.3561 22.6396 27.4899 23.0517L30.8046 33.2533C31.104 34.1746 30.0495 34.9407 29.2658 34.3713L20.5878 28.0664C20.2373 27.8117 19.7627 27.8117 19.4122 28.0664L10.7342 34.3713C9.95048 34.9407 8.896 34.1746 9.19535 33.2533L12.5101 23.0517C12.6439 22.6396 12.4973 22.1883 12.1468 21.9336L3.46877 15.6287C2.68505 15.0593 3.08783 13.8197 4.05655 13.8197H14.7832C15.2164 13.8197 15.6004 13.5407 15.7342 13.1287L19.0489 2.92705Z" fill="#E0AD01"/>
+<path d="M68 3.23607L71.3147 13.4377C71.5825 14.2617 72.3504 14.8197 73.2168 14.8197H83.9434L75.2654 21.1246C74.5645 21.6339 74.2711 22.5366 74.5389 23.3607L77.8536 33.5623L69.1756 27.2574C68.4746 26.7481 67.5254 26.7481 66.8244 27.2574L58.1464 33.5623L61.4611 23.3607C61.7289 22.5366 61.4355 21.6339 60.7346 21.1246L60.1468 21.9336L60.7346 21.1246L52.0566 14.8197H62.7832C63.6496 14.8197 64.4175 14.2617 64.6853 13.4377L68 3.23607Z" stroke="#D9D9D9" stroke-width="2"/>
+<path d="M116 3.23607L119.315 13.4377C119.582 14.2617 120.35 14.8197 121.217 14.8197H131.943L123.265 21.1246C122.564 21.6339 122.271 22.5366 122.539 23.3607L125.854 33.5623L117.176 27.2574C116.475 26.7481 115.525 26.7481 114.824 27.2574L106.146 33.5623L109.461 23.3607C109.729 22.5366 109.436 21.6339 108.735 21.1246L108.147 21.9336L108.735 21.1246L100.057 14.8197H110.783C111.65 14.8197 112.418 14.2617 112.685 13.4377L116 3.23607Z" stroke="#D9D9D9" stroke-width="2"/>
+<path d="M164 3.23607L167.315 13.4377C167.582 14.2617 168.35 14.8197 169.217 14.8197H179.943L171.265 21.1246C170.564 21.6339 170.271 22.5366 170.539 23.3607L173.854 33.5623L165.176 27.2574C164.475 26.7481 163.525 26.7481 162.824 27.2574L154.146 33.5623L157.461 23.3607C157.729 22.5366 157.436 21.6339 156.735 21.1246L156.147 21.9336L156.735 21.1246L148.057 14.8197H158.783C159.65 14.8197 160.418 14.2617 160.685 13.4377L164 3.23607Z" stroke="#D9D9D9" stroke-width="2"/>
+<path d="M212 3.23607L215.315 13.4377C215.582 14.2617 216.35 14.8197 217.217 14.8197H227.943L219.265 21.1246C218.564 21.6339 218.271 22.5366 218.539 23.3607L221.854 33.5623L213.176 27.2574C212.475 26.7481 211.525 26.7481 210.824 27.2574L202.146 33.5623L205.461 23.3607C205.729 22.5366 205.436 21.6339 204.735 21.1246L204.147 21.9336L204.735 21.1246L196.057 14.8197H206.783C207.65 14.8197 208.418 14.2617 208.685 13.4377L212 3.23607Z" stroke="#D9D9D9" stroke-width="2"/>
+</svg>
@@ -0,0 +1,7 @@
+<svg width="232" height="40" viewBox="0 0 232 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.0489 2.92705C19.3483 2.00574 20.6517 2.00574 20.9511 2.92705L24.2658 13.1287C24.3996 13.5407 24.7836 13.8197 25.2168 13.8197H35.9434C36.9122 13.8197 37.3149 15.0593 36.5312 15.6287L27.8532 21.9336C27.5027 22.1883 27.3561 22.6396 27.4899 23.0517L30.8046 33.2533C31.104 34.1746 30.0495 34.9407 29.2658 34.3713L20.5878 28.0664C20.2373 27.8117 19.7627 27.8117 19.4122 28.0664L10.7342 34.3713C9.95048 34.9407 8.896 34.1746 9.19535 33.2533L12.5101 23.0517C12.6439 22.6396 12.4973 22.1883 12.1468 21.9336L3.46877 15.6287C2.68505 15.0593 3.08783 13.8197 4.05655 13.8197H14.7832C15.2164 13.8197 15.6004 13.5407 15.7342 13.1287L19.0489 2.92705Z" fill="#E0AD01"/>
+<path d="M67.0489 2.92705C67.3483 2.00574 68.6517 2.00574 68.9511 2.92705L72.2658 13.1287C72.3996 13.5407 72.7836 13.8197 73.2168 13.8197H83.9434C84.9122 13.8197 85.3149 15.0593 84.5312 15.6287L75.8532 21.9336C75.5027 22.1883 75.3561 22.6396 75.4899 23.0517L78.8046 33.2533C79.104 34.1746 78.0495 34.9407 77.2658 34.3713L68.5878 28.0664C68.2373 27.8117 67.7627 27.8117 67.4122 28.0664L58.7342 34.3713C57.9505 34.9407 56.896 34.1746 57.1954 33.2533L60.5101 23.0517C60.6439 22.6396 60.4973 22.1883 60.1468 21.9336L51.4688 15.6287C50.6851 15.0593 51.0878 13.8197 52.0566 13.8197H62.7832C63.2164 13.8197 63.6004 13.5407 63.7342 13.1287L67.0489 2.92705Z" fill="#E0AD01"/>
+<path d="M116 3.23607L119.315 13.4377C119.582 14.2617 120.35 14.8197 121.217 14.8197H131.943L123.265 21.1246C122.564 21.6339 122.271 22.5366 122.539 23.3607L125.854 33.5623L117.176 27.2574C116.475 26.7481 115.525 26.7481 114.824 27.2574L106.146 33.5623L109.461 23.3607C109.729 22.5366 109.436 21.6339 108.735 21.1246L108.147 21.9336L108.735 21.1246L100.057 14.8197H110.783C111.65 14.8197 112.418 14.2617 112.685 13.4377L116 3.23607Z" stroke="#D9D9D9" stroke-width="2"/>
+<path d="M164 3.23607L167.315 13.4377C167.582 14.2617 168.35 14.8197 169.217 14.8197H179.943L171.265 21.1246C170.564 21.6339 170.271 22.5366 170.539 23.3607L173.854 33.5623L165.176 27.2574C164.475 26.7481 163.525 26.7481 162.824 27.2574L154.146 33.5623L157.461 23.3607C157.729 22.5366 157.436 21.6339 156.735 21.1246L156.147 21.9336L156.735 21.1246L148.057 14.8197H158.783C159.65 14.8197 160.418 14.2617 160.685 13.4377L164 3.23607Z" stroke="#D9D9D9" stroke-width="2"/>
+<path d="M212 3.23607L215.315 13.4377C215.582 14.2617 216.35 14.8197 217.217 14.8197H227.943L219.265 21.1246C218.564 21.6339 218.271 22.5366 218.539 23.3607L221.854 33.5623L213.176 27.2574C212.475 26.7481 211.525 26.7481 210.824 27.2574L202.146 33.5623L205.461 23.3607C205.729 22.5366 205.436 21.6339 204.735 21.1246L204.147 21.9336L204.735 21.1246L196.057 14.8197H206.783C207.65 14.8197 208.418 14.2617 208.685 13.4377L212 3.23607Z" stroke="#D9D9D9" stroke-width="2"/>
+</svg>
@@ -0,0 +1,7 @@
+<svg width="232" height="40" viewBox="0 0 232 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.0489 2.92705C19.3483 2.00574 20.6517 2.00574 20.9511 2.92705L24.2658 13.1287C24.3996 13.5407 24.7836 13.8197 25.2168 13.8197H35.9434C36.9122 13.8197 37.3149 15.0593 36.5312 15.6287L27.8532 21.9336C27.5027 22.1883 27.3561 22.6396 27.4899 23.0517L30.8046 33.2533C31.104 34.1746 30.0495 34.9407 29.2658 34.3713L20.5878 28.0664C20.2373 27.8117 19.7627 27.8117 19.4122 28.0664L10.7342 34.3713C9.95048 34.9407 8.896 34.1746 9.19535 33.2533L12.5101 23.0517C12.6439 22.6396 12.4973 22.1883 12.1468 21.9336L3.46877 15.6287C2.68505 15.0593 3.08783 13.8197 4.05655 13.8197H14.7832C15.2164 13.8197 15.6004 13.5407 15.7342 13.1287L19.0489 2.92705Z" fill="#E0AD01"/>
+<path d="M67.0489 2.92705C67.3483 2.00574 68.6517 2.00574 68.9511 2.92705L72.2658 13.1287C72.3996 13.5407 72.7836 13.8197 73.2168 13.8197H83.9434C84.9122 13.8197 85.3149 15.0593 84.5312 15.6287L75.8532 21.9336C75.5027 22.1883 75.3561 22.6396 75.4899 23.0517L78.8046 33.2533C79.104 34.1746 78.0495 34.9407 77.2658 34.3713L68.5878 28.0664C68.2373 27.8117 67.7627 27.8117 67.4122 28.0664L58.7342 34.3713C57.9505 34.9407 56.896 34.1746 57.1954 33.2533L60.5101 23.0517C60.6439 22.6396 60.4973 22.1883 60.1468 21.9336L51.4688 15.6287C50.6851 15.0593 51.0878 13.8197 52.0566 13.8197H62.7832C63.2164 13.8197 63.6004 13.5407 63.7342 13.1287L67.0489 2.92705Z" fill="#E0AD01"/>
+<path d="M115.049 2.92705C115.348 2.00574 116.652 2.00574 116.951 2.92705L120.266 13.1287C120.4 13.5407 120.784 13.8197 121.217 13.8197H131.943C132.912 13.8197 133.315 15.0593 132.531 15.6287L123.853 21.9336C123.503 22.1883 123.356 22.6396 123.49 23.0517L126.805 33.2533C127.104 34.1746 126.05 34.9407 125.266 34.3713L116.588 28.0664C116.237 27.8117 115.763 27.8117 115.412 28.0664L106.734 34.3713C105.95 34.9407 104.896 34.1746 105.195 33.2533L108.51 23.0517C108.644 22.6396 108.497 22.1883 108.147 21.9336L99.4688 15.6287C98.6851 15.0593 99.0878 13.8197 100.057 13.8197H110.783C111.216 13.8197 111.6 13.5407 111.734 13.1287L115.049 2.92705Z" fill="#E0AD01"/>
+<path d="M164 3.23607L167.315 13.4377C167.582 14.2617 168.35 14.8197 169.217 14.8197H179.943L171.265 21.1246C170.564 21.6339 170.271 22.5366 170.539 23.3607L173.854 33.5623L165.176 27.2574C164.475 26.7481 163.525 26.7481 162.824 27.2574L154.146 33.5623L157.461 23.3607C157.729 22.5366 157.436 21.6339 156.735 21.1246L156.147 21.9336L156.735 21.1246L148.057 14.8197H158.783C159.65 14.8197 160.418 14.2617 160.685 13.4377L164 3.23607Z" stroke="#D9D9D9" stroke-width="2"/>
+<path d="M212 3.23607L215.315 13.4377C215.582 14.2617 216.35 14.8197 217.217 14.8197H227.943L219.265 21.1246C218.564 21.6339 218.271 22.5366 218.539 23.3607L221.854 33.5623L213.176 27.2574C212.475 26.7481 211.525 26.7481 210.824 27.2574L202.146 33.5623L205.461 23.3607C205.729 22.5366 205.436 21.6339 204.735 21.1246L204.147 21.9336L204.735 21.1246L196.057 14.8197H206.783C207.65 14.8197 208.418 14.2617 208.685 13.4377L212 3.23607Z" stroke="#D9D9D9" stroke-width="2"/>
+</svg>
@@ -0,0 +1,7 @@
+<svg width="232" height="40" viewBox="0 0 232 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.0489 2.92705C19.3483 2.00574 20.6517 2.00574 20.9511 2.92705L24.2658 13.1287C24.3996 13.5407 24.7836 13.8197 25.2168 13.8197H35.9434C36.9122 13.8197 37.3149 15.0593 36.5312 15.6287L27.8532 21.9336C27.5027 22.1883 27.3561 22.6396 27.4899 23.0517L30.8046 33.2533C31.104 34.1746 30.0495 34.9407 29.2658 34.3713L20.5878 28.0664C20.2373 27.8117 19.7627 27.8117 19.4122 28.0664L10.7342 34.3713C9.95048 34.9407 8.896 34.1746 9.19535 33.2533L12.5101 23.0517C12.6439 22.6396 12.4973 22.1883 12.1468 21.9336L3.46877 15.6287C2.68505 15.0593 3.08783 13.8197 4.05655 13.8197H14.7832C15.2164 13.8197 15.6004 13.5407 15.7342 13.1287L19.0489 2.92705Z" fill="#E0AD01"/>
+<path d="M67.0489 2.92705C67.3483 2.00574 68.6517 2.00574 68.9511 2.92705L72.2658 13.1287C72.3996 13.5407 72.7836 13.8197 73.2168 13.8197H83.9434C84.9122 13.8197 85.3149 15.0593 84.5312 15.6287L75.8532 21.9336C75.5027 22.1883 75.3561 22.6396 75.4899 23.0517L78.8046 33.2533C79.104 34.1746 78.0495 34.9407 77.2658 34.3713L68.5878 28.0664C68.2373 27.8117 67.7627 27.8117 67.4122 28.0664L58.7342 34.3713C57.9505 34.9407 56.896 34.1746 57.1954 33.2533L60.5101 23.0517C60.6439 22.6396 60.4973 22.1883 60.1468 21.9336L51.4688 15.6287C50.6851 15.0593 51.0878 13.8197 52.0566 13.8197H62.7832C63.2164 13.8197 63.6004 13.5407 63.7342 13.1287L67.0489 2.92705Z" fill="#E0AD01"/>
+<path d="M115.049 2.92705C115.348 2.00574 116.652 2.00574 116.951 2.92705L120.266 13.1287C120.4 13.5407 120.784 13.8197 121.217 13.8197H131.943C132.912 13.8197 133.315 15.0593 132.531 15.6287L123.853 21.9336C123.503 22.1883 123.356 22.6396 123.49 23.0517L126.805 33.2533C127.104 34.1746 126.05 34.9407 125.266 34.3713L116.588 28.0664C116.237 27.8117 115.763 27.8117 115.412 28.0664L106.734 34.3713C105.95 34.9407 104.896 34.1746 105.195 33.2533L108.51 23.0517C108.644 22.6396 108.497 22.1883 108.147 21.9336L99.4688 15.6287C98.6851 15.0593 99.0878 13.8197 100.057 13.8197H110.783C111.216 13.8197 111.6 13.5407 111.734 13.1287L115.049 2.92705Z" fill="#E0AD01"/>
+<path d="M163.049 2.92705C163.348 2.00574 164.652 2.00574 164.951 2.92705L168.266 13.1287C168.4 13.5407 168.784 13.8197 169.217 13.8197H179.943C180.912 13.8197 181.315 15.0593 180.531 15.6287L171.853 21.9336C171.503 22.1883 171.356 22.6396 171.49 23.0517L174.805 33.2533C175.104 34.1746 174.05 34.9407 173.266 34.3713L164.588 28.0664C164.237 27.8117 163.763 27.8117 163.412 28.0664L154.734 34.3713C153.95 34.9407 152.896 34.1746 153.195 33.2533L156.51 23.0517C156.644 22.6396 156.497 22.1883 156.147 21.9336L147.469 15.6287C146.685 15.0593 147.088 13.8197 148.057 13.8197H158.783C159.216 13.8197 159.6 13.5407 159.734 13.1287L163.049 2.92705Z" fill="#E0AD01"/>
+<path d="M212 3.23607L215.315 13.4377C215.582 14.2617 216.35 14.8197 217.217 14.8197H227.943L219.265 21.1246C218.564 21.6339 218.271 22.5366 218.539 23.3607L221.854 33.5623L213.176 27.2574C212.475 26.7481 211.525 26.7481 210.824 27.2574L202.146 33.5623L205.461 23.3607C205.729 22.5366 205.436 21.6339 204.735 21.1246L204.147 21.9336L204.735 21.1246L196.057 14.8197H206.783C207.65 14.8197 208.418 14.2617 208.685 13.4377L212 3.23607Z" stroke="#D9D9D9" stroke-width="2"/>
+</svg>
@@ -0,0 +1,7 @@
+<svg width="232" height="40" viewBox="0 0 232 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.0489 2.92705C19.3483 2.00574 20.6517 2.00574 20.9511 2.92705L24.2658 13.1287C24.3996 13.5407 24.7836 13.8197 25.2168 13.8197H35.9434C36.9122 13.8197 37.3149 15.0593 36.5312 15.6287L27.8532 21.9336C27.5027 22.1883 27.3561 22.6396 27.4899 23.0517L30.8046 33.2533C31.104 34.1746 30.0495 34.9407 29.2658 34.3713L20.5878 28.0664C20.2373 27.8117 19.7627 27.8117 19.4122 28.0664L10.7342 34.3713C9.95048 34.9407 8.896 34.1746 9.19535 33.2533L12.5101 23.0517C12.6439 22.6396 12.4973 22.1883 12.1468 21.9336L3.46877 15.6287C2.68505 15.0593 3.08783 13.8197 4.05655 13.8197H14.7832C15.2164 13.8197 15.6004 13.5407 15.7342 13.1287L19.0489 2.92705Z" fill="#E0AD01"/>
+<path d="M67.0489 2.92705C67.3483 2.00574 68.6517 2.00574 68.9511 2.92705L72.2658 13.1287C72.3996 13.5407 72.7836 13.8197 73.2168 13.8197H83.9434C84.9122 13.8197 85.3149 15.0593 84.5312 15.6287L75.8532 21.9336C75.5027 22.1883 75.3561 22.6396 75.4899 23.0517L78.8046 33.2533C79.104 34.1746 78.0495 34.9407 77.2658 34.3713L68.5878 28.0664C68.2373 27.8117 67.7627 27.8117 67.4122 28.0664L58.7342 34.3713C57.9505 34.9407 56.896 34.1746 57.1954 33.2533L60.5101 23.0517C60.6439 22.6396 60.4973 22.1883 60.1468 21.9336L51.4688 15.6287C50.6851 15.0593 51.0878 13.8197 52.0566 13.8197H62.7832C63.2164 13.8197 63.6004 13.5407 63.7342 13.1287L67.0489 2.92705Z" fill="#E0AD01"/>
+<path d="M115.049 2.92705C115.348 2.00574 116.652 2.00574 116.951 2.92705L120.266 13.1287C120.4 13.5407 120.784 13.8197 121.217 13.8197H131.943C132.912 13.8197 133.315 15.0593 132.531 15.6287L123.853 21.9336C123.503 22.1883 123.356 22.6396 123.49 23.0517L126.805 33.2533C127.104 34.1746 126.05 34.9407 125.266 34.3713L116.588 28.0664C116.237 27.8117 115.763 27.8117 115.412 28.0664L106.734 34.3713C105.95 34.9407 104.896 34.1746 105.195 33.2533L108.51 23.0517C108.644 22.6396 108.497 22.1883 108.147 21.9336L99.4688 15.6287C98.6851 15.0593 99.0878 13.8197 100.057 13.8197H110.783C111.216 13.8197 111.6 13.5407 111.734 13.1287L115.049 2.92705Z" fill="#E0AD01"/>
+<path d="M163.049 2.92705C163.348 2.00574 164.652 2.00574 164.951 2.92705L168.266 13.1287C168.4 13.5407 168.784 13.8197 169.217 13.8197H179.943C180.912 13.8197 181.315 15.0593 180.531 15.6287L171.853 21.9336C171.503 22.1883 171.356 22.6396 171.49 23.0517L174.805 33.2533C175.104 34.1746 174.05 34.9407 173.266 34.3713L164.588 28.0664C164.237 27.8117 163.763 27.8117 163.412 28.0664L154.734 34.3713C153.95 34.9407 152.896 34.1746 153.195 33.2533L156.51 23.0517C156.644 22.6396 156.497 22.1883 156.147 21.9336L147.469 15.6287C146.685 15.0593 147.088 13.8197 148.057 13.8197H158.783C159.216 13.8197 159.6 13.5407 159.734 13.1287L163.049 2.92705Z" fill="#E0AD01"/>
+<path d="M211.049 2.92705C211.348 2.00574 212.652 2.00574 212.951 2.92705L216.266 13.1287C216.4 13.5407 216.784 13.8197 217.217 13.8197H227.943C228.912 13.8197 229.315 15.0593 228.531 15.6287L219.853 21.9336C219.503 22.1883 219.356 22.6396 219.49 23.0517L222.805 33.2533C223.104 34.1746 222.05 34.9407 221.266 34.3713L212.588 28.0664C212.237 27.8117 211.763 27.8117 211.412 28.0664L202.734 34.3713C201.95 34.9407 200.896 34.1746 201.195 33.2533L204.51 23.0517C204.644 22.6396 204.497 22.1883 204.147 21.9336L195.469 15.6287C194.685 15.0593 195.088 13.8197 196.057 13.8197H206.783C207.216 13.8197 207.6 13.5407 207.734 13.1287L211.049 2.92705Z" fill="#E0AD01"/>
+</svg>