search card - desktop

frontend/app/(urls)/search/components/SearchCard.tsx

@@ -0,0 +1,186 @@
+import React from 'react'
+import Image, { StaticImageData } from 'next/image'
+import Button from '@/components/ui/Button'
+import { SearchCardProps } from '@/app/types/index'
+
+const SearchCard = ({
+  id,
+  username,
+  userImg,
+  start_point,
+  country_from,
+  country_from_icon,
+  country_from_code,
+  end_point,
+  country_to,
+  country_to_icon,
+  country_to_code,
+  cargo_type,
+  user_request,
+  user_comment,
+  moving_type,
+  estimated_date,
+  day_out,
+  day_in,
+}: SearchCardProps) => {
+  const getUserRequestStyles = () => {
+    if (user_request === 'Нужен перевозчик') {
+      return 'text-[#065bff]'
+    }
+    return 'text-[#45c226]'
+  }
+
+  const setMovingTypeIcon = () => {
+    if (moving_type === 'Авиатранспорт') {
+      return '/images/airplane.png'
+    }
+    return '/images/car.png'
+  }
+
+  return (
+    <>
+      {/* Desktop version */}
+      <div className="hidden sm:block">
+        <div className="bg-white rounded-xl shadow-lg p-6 w-full my-4">
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center gap-5">
+              <div className="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center">
+                <Image
+                  src={userImg}
+                  alt={username}
+                  width={52}
+                  height={52}
+                  className="rounded-full object-cover"
+                />
+              </div>
+              <div className="flex items-center gap-3">
+                <div className="text-base font-semibold">{username}</div>
+                <div className="text-gray-500">|</div>
+                <div
+                  className={`text-base font-semibold ${getUserRequestStyles()}`}
+                >
+                  {user_request}
+                </div>
+                <div className="ml-1">
+                  Тип посылки:{' '}
+                  <span className="text-orange font-semibold ml-1">
+                    {cargo_type}
+                  </span>
+                </div>
+              </div>
+            </div>
+            <Button
+              text="Откликнуться"
+              className="bg-orange text-white px-10 py-3 text-base font-semibold hover:bg-orange/80 transition-colors cursor-pointer"
+            />
+          </div>
+
+          <div className="bg-[#f8f8f8] rounded-lg p-5">
+            <div className="flex items-baseline gap-2">
+              <span className="text-gray-600">{user_comment}</span>
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between mt-6">
+            <div className="flex flex-col">
+              <span className="text-gray-500">Забрать из:</span>
+              <div className="flex flex-col">
+                <div className="flex items-center">
+                  <Image
+                    src={country_from_icon}
+                    width={26}
+                    height={13}
+                    alt={country_from_code}
+                  />
+                  <span className="text-gray-400 pr-2 pl-1">
+                    {country_from_code}
+                  </span>
+                  <span className="text-base font-semibold">
+                    {start_point} / {country_from}
+                  </span>
+                </div>
+                {user_request === 'Могу перевезти' && (
+                  <div className="text-sm text-gray-500 mt-1">
+                    <span className="text-sm font-normal">
+                      Дата отправления:
+                    </span>{' '}
+                    <span className="text-sm font-semibold">
+                      {day_out?.toLocaleDateString()}
+                    </span>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className="text-center">
+              <div className="flex items-center justify-center gap-2">
+                <span className="text-base font-semibold">{moving_type}</span>
+                <Image
+                  src={setMovingTypeIcon()}
+                  width={15}
+                  height={15}
+                  alt="route vector"
+                />
+              </div>
+              <div className="flex items-center justify-between w-[500px] mx-auto my-1">
+                <Image
+                  src="/images/vector.svg"
+                  width={500}
+                  height={6}
+                  alt="route vector"
+                  className="absolute"
+                />
+                <div className="w-5 h-5 rounded-full bg-white border-3 border-[#065bff] relative z-10" />
+                <div className="w-5 h-5 rounded-full bg-white border-3 border-[#45c226] relative z-10" />
+              </div>
+
+              {user_request === 'Нужен перевозчик' && (
+                <div className="text-sm text-gray-500">
+                  <span className="text-sm font-normal">Дата доставки:</span>{' '}
+                  <span className="text-sm font-semibold">
+                    {estimated_date.toLocaleDateString()}
+                  </span>
+                </div>
+              )}
+            </div>
+
+            <div className="flex flex-col items-end">
+              <span className="text-gray-500">Доставить в:</span>
+              <div className="flex flex-col items-end">
+                <div className="flex items-center">
+                  <Image
+                    src={country_to_icon}
+                    width={26}
+                    height={13}
+                    alt={country_to_code}
+                  />
+                  <span className="text-gray-400 pr-2 pl-1">
+                    {country_to_code}
+                  </span>
+                  <span className="text-base font-semibold">
+                    {end_point} / {country_to}
+                  </span>
+                </div>
+                {user_request === 'Могу перевезти' && (
+                  <div className="text-sm text-gray-500 mt-1">
+                    <span className="text-sm font-normal">Дата доставки:</span>{' '}
+                    <span className="text-sm font-semibold">
+                      {day_in?.toLocaleDateString()}
+                    </span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* мобильная версия */}
+      <div className="block sm:hidden">
+        <div className="bg-white rounded-xl shadow-lg p-4 w-full my-4">asd</div>
+      </div>
+    </>
+  )
+}
+
+export default SearchCard

frontend/app/(urls)/search/page.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const SearchPage = () => {
+  return <div>SearchPage</div>
+}
+
+export default SearchPage

frontend/app/page.tsx

@@ -1,17 +1,71 @@
 import React from 'react'
 import Image from 'next/image'
 import AddressSelector from '@/components/AddressSelector'
+import SearchCard from '@/app/(urls)/search/components/SearchCard'
+import avatar from '../public/images/avatar.png'
+import belarusIcon from '../public/images/belarus.png'
+import russiaIcon from '../public/images/russia.png'
 
 export default function Home() {
-  const routes = 38464
+  const routes = 12845
+  const userImg = avatar
+  const blIcon = belarusIcon
+  const ruIcon = russiaIcon
+
+  const data = [
+    {
+      id: 1123,
+      username: 'John Doe',
+      userImg: userImg,
+      start_point: 'Минск',
+      country_from: 'Беларусь',
+      end_point: 'Москва',
+      country_to: 'Россия',
+      cargo_type: 'Документы',
+      user_request: 'Нужен перевозчик',
+      user_comment: 'Нужно перевезти документы из Минска в Москву',
+      country_from_icon: blIcon,
+      country_to_icon: ruIcon,
+      country_from_code: 'BY',
+      country_to_code: 'RU',
+      moving_type: 'Авиатранспорт',
+      estimated_date: new Date(2025, 4, 15),
+    },
+    {
+      id: 2423,
+      username: 'John Doe',
+      userImg: userImg,
+      start_point: 'Минск',
+      country_from: 'Беларусь',
+      end_point: 'Москва',
+      country_to: 'Россия',
+      cargo_type: 'Документы',
+      user_request: 'Могу перевезти',
+      user_comment: 'Нужно перевезти документы из Минска в Москву',
+      moving_type: 'Автоперевозка',
+      estimated_date: new Date(2025, 5, 18),
+      country_from_icon: blIcon,
+      country_to_icon: ruIcon,
+      country_from_code: 'BY',
+      country_to_code: 'RU',
+      day_out: new Date(2025, 5, 21),
+      day_in: new Date(2025, 5, 25),
+    },
+  ]
   return (
     <div className="flex flex-col items-center justify-center  max-w-[93%] mx-auto">
-      <div className="flex  items-center justify-center space-x-16">
+      <div className="flex items-center justify-center space-x-16">
         <div>
-          <Image src="/images/box1.png" alt="main" width={220} height={220} />
+          <Image
+            src="/images/box1.png"
+            alt="main"
+            width={220}
+            height={220}
+            className="hidden sm:block"
+          />
         </div>
         <div className="flex flex-col items-center justify-center space-y-5">
-          <h1 className="text-4xl text-center font-bold">
+          <h1 className="text-3xl sm:text-4xl text-center font-bold">
             <div className="pb-1">
               Сервис по <span className="text-orange">поиску</span>{' '}
             </div>
@@ -19,13 +73,19 @@ export default function Home() {
               <span className="text-orange">перевозчиков</span> посылок
             </div>
           </h1>
-          <p className="text-lg text-center">
+          <p className="text-base sm:text-lg text-center pb-3">
             Доставка посылок с попутчиками: от документов до крупногабаритных
             грузов
           </p>
         </div>
         <div>
-          <Image src="/images/box2.png" alt="main" width={220} height={220} />
+          <Image
+            src="/images/box2.png"
+            alt="main"
+            width={220}
+            height={220}
+            className="hidden sm:block"
+          />
         </div>
       </div>
 
@@ -43,6 +103,14 @@ export default function Home() {
           перевозке посылок
         </div>
       </div>
+
+      <div className="w-full max-w-[1250px] mx-auto">
+        <div className="grid grid-cols-1 gap-4 w-full">
+          {data.map((card) => (
+            <SearchCard key={card.id} {...card} />
+          ))}
+        </div>
+      </div>
     </div>
   )
 }

frontend/app/types/index.ts

@@ -1,3 +1,5 @@
+import Image, { StaticImageData } from 'next/image'
+
 export interface TextInputProps {
   value: string
   handleChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
@@ -16,3 +18,24 @@ export interface ButtonProps {
   text?: string
   type?: 'button'
 }
+
+export interface SearchCardProps {
+  id: number
+  username: string
+  userImg: string | StaticImageData
+  start_point: string
+  country_from: string
+  country_from_icon: string | StaticImageData
+  country_from_code: string
+  end_point: string
+  country_to: string
+  country_to_icon: string | StaticImageData
+  country_to_code: string
+  cargo_type: string
+  user_request: string
+  moving_type: string
+  estimated_date: Date
+  user_comment: string
+  day_out?: Date
+  day_in?: Date
+}

frontend/components/AddressSelector.tsx

@@ -9,9 +9,9 @@ export default function AddressSelector() {
   const [toAddress, setToAddress] = useState('')
 
   return (
-    <div className="bg-white rounded-xl shadow-lg p-6 w-full my-4">
-      <div className="flex flex-col sm:flex-row items-end gap-3">
-        <div className="flex-[3] min-w-0 px-1">
+    <div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 w-full my-2 sm:my-4">
+      <div className="flex flex-col sm:flex-row sm:items-end gap-4 sm:gap-3">
+        <div className="w-full sm:flex-[3] min-w-0 sm:px-1">
           <TextInput
             placeholder="Минск, Беларусь"
             tooltip="Укажите пункт (Город/Страна), откуда необходимо забрать посылку."
@@ -21,7 +21,7 @@ export default function AddressSelector() {
             name="fromAddress"
           />
         </div>
-        <div className="flex-[3] min-w-0 px-1">
+        <div className="w-full sm:flex-[3] min-w-0 sm:px-1">
           <TextInput
             placeholder="Москва, Россия"
             label="Доставить посылку в"
@@ -33,11 +33,11 @@ export default function AddressSelector() {
         </div>
         <Button
           text="Найти перевозчика"
-          className="flex-1 whitespace-nowrap bg-orange hover:bg-orange/80 text-white p-4"
+          className="w-full sm:w-auto sm:flex-1 whitespace-nowrap bg-orange hover:bg-orange/80 text-white p-4"
         />
         <Button
           text="Найти посылку"
-          className="flex-1 whitespace-nowrap bg-gray-100 hover:bg-gray-200 text-gray-800 p-4"
+          className="w-full sm:w-auto sm:flex-1 whitespace-nowrap bg-gray-100 hover:bg-gray-200 text-gray-800 p-4"
         />
       </div>
     </div>

frontend/components/ui/Button.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ButtonProps } from '@/app/types'
+import { ButtonProps } from '@/app/types/index'
 
 const Button = ({ onClick, className, text, type }: ButtonProps) => {
   return (

frontend/next.config.ts

@@ -1,7 +1,14 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next'
 
 const nextConfig: NextConfig = {
-  /* config options here */
-};
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'via.placeholder.com',
+      },
+    ],
+  },
+}
 
-export default nextConfig;
+export default nextConfig

frontend/public/images/vector.svg

@@ -0,0 +1,58 @@
+<svg width="521" height="4" viewBox="0 0 521 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 2.02181C0 0.92928 3.11013 0.0436119 6.94667 0.0436119H514.053C517.89 0.0436119 521 0.92928 521 2.02181C521 3.11433 517.89 4 514.053 4H6.94666C3.11012 4 0 3.11433 0 2.02181Z" fill="url(#paint0_linear_6203_10870)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.11626 3.90369C6.89024 3.83345 6.89033 3.71958 7.11645 3.64936L12.4973 1.9785L7.11898 0.306974C6.89297 0.23673 6.89305 0.122864 7.11918 0.0526475C7.3453 -0.0175688 7.71183 -0.0175463 7.93785 0.0526978L13.7254 1.85141C13.9514 1.92166 13.9513 2.03552 13.7252 2.10574L7.93493 3.90374C7.70881 3.97396 7.34228 3.97393 7.11626 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5393 3.90369C17.3132 3.83345 17.3133 3.71958 17.5394 3.64936L22.9203 1.9785L17.542 0.306974C17.316 0.23673 17.3161 0.122864 17.5422 0.0526475C17.7683 -0.0175688 18.1348 -0.0175463 18.3608 0.0526978L24.1484 1.85141C24.3744 1.92166 24.3743 2.03552 24.1482 2.10574L18.3579 3.90374C18.1318 3.97396 17.7653 3.97393 17.5393 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.9623 3.90369C27.7362 3.83345 27.7363 3.71958 27.9624 3.64936L33.3433 1.9785L27.965 0.306974C27.739 0.23673 27.739 0.122864 27.9652 0.0526475C28.1913 -0.0175688 28.5578 -0.0175463 28.7838 0.0526978L34.5714 1.85141C34.7974 1.92166 34.7973 2.03552 34.5712 2.10574L28.7809 3.90374C28.5548 3.97396 28.1883 3.97393 27.9623 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M38.3853 3.90369C38.1592 3.83345 38.1593 3.71958 38.3854 3.64936L43.7663 1.9785L38.388 0.306974C38.162 0.23673 38.162 0.122864 38.3882 0.0526475C38.6143 -0.0175688 38.9808 -0.0175463 39.2068 0.0526978L44.9944 1.85141C45.2204 1.92166 45.2203 2.03552 44.9942 2.10574L39.2039 3.90374C38.9778 3.97396 38.6113 3.97393 38.3853 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48.8082 3.90369C48.5822 3.83345 48.5823 3.71958 48.8084 3.64936L54.1893 1.9785L48.811 0.306974C48.585 0.23673 48.585 0.122864 48.8112 0.0526475C49.0373 -0.0175688 49.4038 -0.0175463 49.6298 0.0526978L55.4174 1.85141C55.6434 1.92166 55.6433 2.03552 55.4172 2.10574L49.6269 3.90374C49.4008 3.97396 49.0343 3.97393 48.8082 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M59.2312 3.90369C59.0052 3.83345 59.0053 3.71958 59.2314 3.64936L64.6123 1.9785L59.234 0.306974C59.0079 0.23673 59.008 0.122864 59.2342 0.0526475C59.4603 -0.0175688 59.8268 -0.0175463 60.0528 0.0526978L65.8404 1.85141C66.0664 1.92166 66.0663 2.03552 65.8402 2.10574L60.0499 3.90374C59.8238 3.97396 59.4573 3.97393 59.2312 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M69.6542 3.90369C69.4282 3.83345 69.4283 3.71958 69.6544 3.64936L75.0353 1.9785L69.657 0.306974C69.431 0.23673 69.431 0.122864 69.6572 0.0526475C69.8833 -0.0175688 70.2498 -0.0175463 70.4758 0.0526978L76.2634 1.85141C76.4894 1.92166 76.4893 2.03552 76.2632 2.10574L70.4729 3.90374C70.2468 3.97396 69.8803 3.97393 69.6542 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M80.0772 3.90369C79.8512 3.83345 79.8513 3.71958 80.0774 3.64936L85.4583 1.9785L80.08 0.306974C79.854 0.23673 79.854 0.122864 80.0802 0.0526475C80.3063 -0.0175688 80.6728 -0.0175463 80.8988 0.0526978L86.6864 1.85141C86.9124 1.92166 86.9123 2.03552 86.6862 2.10574L80.8959 3.90374C80.6698 3.97396 80.3033 3.97393 80.0772 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M90.5002 3.90369C90.2742 3.83345 90.2743 3.71958 90.5004 3.64936L95.8812 1.9785L90.503 0.306974C90.2769 0.23673 90.277 0.122864 90.5032 0.0526475C90.7293 -0.0175688 91.0958 -0.0175463 91.3218 0.0526978L97.1094 1.85141C97.3354 1.92166 97.3353 2.03552 97.1092 2.10574L91.3189 3.90374C91.0928 3.97396 90.7262 3.97393 90.5002 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M100.923 3.90369C100.697 3.83345 100.697 3.71958 100.923 3.64936L106.304 1.9785L100.926 0.306974C100.7 0.23673 100.7 0.122864 100.926 0.0526475C101.152 -0.0175688 101.519 -0.0175463 101.745 0.0526978L107.532 1.85141C107.758 1.92166 107.758 2.03552 107.532 2.10574L101.742 3.90374C101.516 3.97396 101.149 3.97393 100.923 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M111.346 3.90369C111.12 3.83345 111.12 3.71958 111.346 3.64936L116.727 1.9785L111.349 0.306974C111.123 0.23673 111.123 0.122864 111.349 0.0526475C111.575 -0.0175688 111.942 -0.0175463 112.168 0.0526978L117.955 1.85141C118.181 1.92166 118.181 2.03552 117.955 2.10574L112.165 3.90374C111.939 3.97396 111.572 3.97393 111.346 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M121.769 3.90369C121.543 3.83345 121.543 3.71958 121.769 3.64936L127.15 1.9785L121.772 0.306974C121.546 0.23673 121.546 0.122864 121.772 0.0526475C121.998 -0.0175688 122.365 -0.0175463 122.591 0.0526978L128.378 1.85141C128.604 1.92166 128.604 2.03552 128.378 2.10574L122.588 3.90374C122.362 3.97396 121.995 3.97393 121.769 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M132.192 3.90369C131.966 3.83345 131.966 3.71958 132.192 3.64936L137.573 1.9785L132.195 0.306974C131.969 0.23673 131.969 0.122864 132.195 0.0526475C132.421 -0.0175688 132.788 -0.0175463 133.014 0.0526978L138.801 1.85141C139.027 1.92166 139.027 2.03552 138.801 2.10574L133.011 3.90374C132.785 3.97396 132.418 3.97393 132.192 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M142.615 3.90369C142.389 3.83345 142.389 3.71958 142.615 3.64936L147.996 1.9785L142.618 0.306974C142.392 0.23673 142.392 0.122864 142.618 0.0526475C142.844 -0.0175688 143.211 -0.0175463 143.437 0.0526978L149.224 1.85141C149.45 1.92166 149.45 2.03552 149.224 2.10574L143.434 3.90374C143.208 3.97396 142.841 3.97393 142.615 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M153.038 3.90369C152.812 3.83345 152.812 3.71958 153.038 3.64936L158.419 1.9785L153.041 0.306974C152.815 0.23673 152.815 0.122864 153.041 0.0526475C153.267 -0.0175688 153.634 -0.0175463 153.86 0.0526978L159.647 1.85141C159.873 1.92166 159.873 2.03552 159.647 2.10574L153.857 3.90374C153.631 3.97396 153.264 3.97393 153.038 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M163.461 3.90369C163.235 3.83345 163.235 3.71958 163.461 3.64936L168.842 1.9785L163.464 0.306974C163.238 0.23673 163.238 0.122864 163.464 0.0526475C163.69 -0.0175688 164.057 -0.0175463 164.283 0.0526978L170.07 1.85141C170.296 1.92166 170.296 2.03552 170.07 2.10574L164.28 3.90374C164.054 3.97396 163.687 3.97393 163.461 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M173.884 3.90369C173.658 3.83345 173.658 3.71958 173.884 3.64936L179.265 1.9785L173.887 0.306974C173.661 0.23673 173.661 0.122864 173.887 0.0526475C174.113 -0.0175688 174.48 -0.0175463 174.706 0.0526978L180.493 1.85141C180.719 1.92166 180.719 2.03552 180.493 2.10574L174.703 3.90374C174.477 3.97396 174.11 3.97393 173.884 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M184.307 3.90369C184.081 3.83345 184.081 3.71958 184.307 3.64936L189.688 1.9785L184.31 0.306974C184.084 0.23673 184.084 0.122864 184.31 0.0526475C184.536 -0.0175688 184.903 -0.0175463 185.129 0.0526978L190.916 1.85141C191.142 1.92166 191.142 2.03552 190.916 2.10574L185.126 3.90374C184.9 3.97396 184.533 3.97393 184.307 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M194.73 3.90369C194.504 3.83345 194.504 3.71958 194.73 3.64936L200.111 1.9785L194.733 0.306974C194.507 0.23673 194.507 0.122864 194.733 0.0526475C194.959 -0.0175688 195.326 -0.0175463 195.552 0.0526978L201.339 1.85141C201.565 1.92166 201.565 2.03552 201.339 2.10574L195.549 3.90374C195.323 3.97396 194.956 3.97393 194.73 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M205.153 3.90369C204.927 3.83345 204.927 3.71958 205.153 3.64936L210.534 1.9785L205.156 0.306974C204.93 0.23673 204.93 0.122864 205.156 0.0526475C205.382 -0.0175688 205.749 -0.0175463 205.975 0.0526978L211.762 1.85141C211.988 1.92166 211.988 2.03552 211.762 2.10574L205.972 3.90374C205.746 3.97396 205.379 3.97393 205.153 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M215.576 3.90369C215.35 3.83345 215.35 3.71958 215.576 3.64936L220.957 1.9785L215.579 0.306974C215.353 0.23673 215.353 0.122864 215.579 0.0526475C215.805 -0.0175688 216.172 -0.0175463 216.398 0.0526978L222.185 1.85141C222.411 1.92166 222.411 2.03552 222.185 2.10574L216.395 3.90374C216.169 3.97396 215.802 3.97393 215.576 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M225.999 3.90369C225.773 3.83345 225.773 3.71958 225.999 3.64936L231.38 1.9785L226.002 0.306974C225.776 0.23673 225.776 0.122864 226.002 0.0526475C226.228 -0.0175688 226.595 -0.0175463 226.821 0.0526978L232.608 1.85141C232.834 1.92166 232.834 2.03552 232.608 2.10574L226.818 3.90374C226.592 3.97396 226.225 3.97393 225.999 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M236.422 3.90369C236.196 3.83345 236.196 3.71958 236.422 3.64936L241.803 1.9785L236.425 0.306974C236.199 0.23673 236.199 0.122864 236.425 0.0526475C236.651 -0.0175688 237.018 -0.0175463 237.244 0.0526978L243.031 1.85141C243.257 1.92166 243.257 2.03552 243.031 2.10574L237.241 3.90374C237.015 3.97396 236.648 3.97393 236.422 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M246.845 3.90369C246.619 3.83345 246.619 3.71958 246.845 3.64936L252.226 1.9785L246.848 0.306974C246.622 0.23673 246.622 0.122864 246.848 0.0526475C247.074 -0.0175688 247.441 -0.0175463 247.667 0.0526978L253.454 1.85141C253.68 1.92166 253.68 2.03552 253.454 2.10574L247.664 3.90374C247.438 3.97396 247.071 3.97393 246.845 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M257.268 3.90369C257.042 3.83345 257.042 3.71958 257.268 3.64936L262.649 1.9785L257.271 0.306974C257.045 0.23673 257.045 0.122864 257.271 0.0526475C257.497 -0.0175688 257.864 -0.0175463 258.09 0.0526978L263.877 1.85141C264.103 1.92166 264.103 2.03552 263.877 2.10574L258.087 3.90374C257.861 3.97396 257.494 3.97393 257.268 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M267.691 3.90369C267.465 3.83345 267.465 3.71958 267.691 3.64936L273.072 1.9785L267.694 0.306974C267.468 0.23673 267.468 0.122864 267.694 0.0526475C267.92 -0.0175688 268.287 -0.0175463 268.513 0.0526978L274.3 1.85141C274.526 1.92166 274.526 2.03552 274.3 2.10574L268.51 3.90374C268.284 3.97396 267.917 3.97393 267.691 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M278.114 3.90369C277.888 3.83345 277.888 3.71958 278.114 3.64936L283.495 1.9785L278.117 0.306974C277.891 0.23673 277.891 0.122864 278.117 0.0526475C278.343 -0.0175688 278.71 -0.0175463 278.936 0.0526978L284.723 1.85141C284.949 1.92166 284.949 2.03552 284.723 2.10574L278.933 3.90374C278.707 3.97396 278.34 3.97393 278.114 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M288.537 3.90369C288.311 3.83345 288.311 3.71958 288.537 3.64936L293.918 1.9785L288.54 0.306974C288.314 0.23673 288.314 0.122864 288.54 0.0526475C288.766 -0.0175688 289.133 -0.0175463 289.359 0.0526978L295.146 1.85141C295.372 1.92166 295.372 2.03552 295.146 2.10574L289.356 3.90374C289.13 3.97396 288.763 3.97393 288.537 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M298.96 3.90369C298.734 3.83345 298.734 3.71958 298.96 3.64936L304.341 1.9785L298.963 0.306974C298.737 0.23673 298.737 0.122864 298.963 0.0526475C299.189 -0.0175688 299.556 -0.0175463 299.782 0.0526978L305.569 1.85141C305.795 1.92166 305.795 2.03552 305.569 2.10574L299.779 3.90374C299.553 3.97396 299.186 3.97393 298.96 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M309.383 3.90369C309.157 3.83345 309.157 3.71958 309.383 3.64936L314.764 1.9785L309.386 0.306974C309.16 0.23673 309.16 0.122864 309.386 0.0526475C309.612 -0.0175688 309.979 -0.0175463 310.205 0.0526978L315.992 1.85141C316.218 1.92166 316.218 2.03552 315.992 2.10574L310.202 3.90374C309.976 3.97396 309.609 3.97393 309.383 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M319.806 3.90369C319.58 3.83345 319.58 3.71958 319.806 3.64936L325.187 1.9785L319.809 0.306974C319.583 0.23673 319.583 0.122864 319.809 0.0526475C320.035 -0.0175688 320.402 -0.0175463 320.628 0.0526978L326.415 1.85141C326.641 1.92166 326.641 2.03552 326.415 2.10574L320.625 3.90374C320.399 3.97396 320.032 3.97393 319.806 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M330.229 3.90369C330.003 3.83345 330.003 3.71958 330.229 3.64936L335.61 1.9785L330.232 0.306974C330.006 0.23673 330.006 0.122864 330.232 0.0526475C330.458 -0.0175688 330.825 -0.0175463 331.051 0.0526978L336.838 1.85141C337.064 1.92166 337.064 2.03552 336.838 2.10574L331.048 3.90374C330.822 3.97396 330.455 3.97393 330.229 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M340.652 3.90369C340.426 3.83345 340.426 3.71958 340.652 3.64936L346.033 1.9785L340.655 0.306974C340.429 0.23673 340.429 0.122864 340.655 0.0526475C340.881 -0.0175688 341.248 -0.0175463 341.474 0.0526978L347.261 1.85141C347.487 1.92166 347.487 2.03552 347.261 2.10574L341.471 3.90374C341.245 3.97396 340.878 3.97393 340.652 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M351.075 3.90369C350.849 3.83345 350.849 3.71958 351.075 3.64936L356.456 1.9785L351.078 0.306974C350.852 0.23673 350.852 0.122864 351.078 0.0526475C351.304 -0.0175688 351.671 -0.0175463 351.897 0.0526978L357.684 1.85141C357.91 1.92166 357.91 2.03552 357.684 2.10574L351.894 3.90374C351.668 3.97396 351.301 3.97393 351.075 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M361.498 3.90369C361.272 3.83345 361.272 3.71958 361.498 3.64936L366.879 1.9785L361.501 0.306974C361.275 0.23673 361.275 0.122864 361.501 0.0526475C361.727 -0.0175688 362.094 -0.0175463 362.32 0.0526978L368.107 1.85141C368.333 1.92166 368.333 2.03552 368.107 2.10574L362.317 3.90374C362.091 3.97396 361.724 3.97393 361.498 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M371.921 3.90369C371.695 3.83345 371.695 3.71958 371.921 3.64936L377.302 1.9785L371.924 0.306974C371.698 0.23673 371.698 0.122864 371.924 0.0526475C372.15 -0.0175688 372.517 -0.0175463 372.743 0.0526978L378.53 1.85141C378.756 1.92166 378.756 2.03552 378.53 2.10574L372.74 3.90374C372.514 3.97396 372.147 3.97393 371.921 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M382.344 3.90369C382.118 3.83345 382.118 3.71958 382.344 3.64936L387.725 1.9785L382.347 0.306974C382.121 0.23673 382.121 0.122864 382.347 0.0526475C382.573 -0.0175688 382.94 -0.0175463 383.166 0.0526978L388.953 1.85141C389.179 1.92166 389.179 2.03552 388.953 2.10574L383.163 3.90374C382.937 3.97396 382.57 3.97393 382.344 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M392.767 3.90369C392.541 3.83345 392.541 3.71958 392.767 3.64936L398.148 1.9785L392.77 0.306974C392.544 0.23673 392.544 0.122864 392.77 0.0526475C392.996 -0.0175688 393.363 -0.0175463 393.589 0.0526978L399.376 1.85141C399.602 1.92166 399.602 2.03552 399.376 2.10574L393.586 3.90374C393.36 3.97396 392.993 3.97393 392.767 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M403.19 3.90369C402.964 3.83345 402.964 3.71958 403.19 3.64936L408.571 1.9785L403.193 0.306974C402.967 0.23673 402.967 0.122864 403.193 0.0526475C403.419 -0.0175688 403.786 -0.0175463 404.012 0.0526978L409.799 1.85141C410.025 1.92166 410.025 2.03552 409.799 2.10574L404.009 3.90374C403.783 3.97396 403.416 3.97393 403.19 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M413.613 3.90369C413.387 3.83345 413.387 3.71958 413.613 3.64936L418.994 1.9785L413.616 0.306974C413.39 0.23673 413.39 0.122864 413.616 0.0526475C413.842 -0.0175688 414.209 -0.0175463 414.435 0.0526978L420.222 1.85141C420.448 1.92166 420.448 2.03552 420.222 2.10574L414.432 3.90374C414.206 3.97396 413.839 3.97393 413.613 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M424.036 3.90369C423.81 3.83345 423.81 3.71958 424.036 3.64936L429.417 1.9785L424.039 0.306974C423.813 0.23673 423.813 0.122864 424.039 0.0526475C424.265 -0.0175688 424.632 -0.0175463 424.858 0.0526978L430.645 1.85141C430.871 1.92166 430.871 2.03552 430.645 2.10574L424.855 3.90374C424.629 3.97396 424.262 3.97393 424.036 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M434.459 3.90369C434.233 3.83345 434.233 3.71958 434.459 3.64936L439.84 1.9785L434.462 0.306974C434.236 0.23673 434.236 0.122864 434.462 0.0526475C434.688 -0.0175688 435.055 -0.0175463 435.281 0.0526978L441.068 1.85141C441.294 1.92166 441.294 2.03552 441.068 2.10574L435.278 3.90374C435.052 3.97396 434.685 3.97393 434.459 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M444.882 3.90369C444.656 3.83345 444.656 3.71958 444.882 3.64936L450.263 1.9785L444.885 0.306974C444.659 0.23673 444.659 0.122864 444.885 0.0526475C445.111 -0.0175688 445.478 -0.0175463 445.704 0.0526978L451.491 1.85141C451.717 1.92166 451.717 2.03552 451.491 2.10574L445.701 3.90374C445.475 3.97396 445.108 3.97393 444.882 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M455.305 3.90369C455.079 3.83345 455.079 3.71958 455.305 3.64936L460.686 1.9785L455.308 0.306974C455.082 0.23673 455.082 0.122864 455.308 0.0526475C455.534 -0.0175688 455.901 -0.0175463 456.127 0.0526978L461.914 1.85141C462.14 1.92166 462.14 2.03552 461.914 2.10574L456.124 3.90374C455.898 3.97396 455.531 3.97393 455.305 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M465.728 3.90369C465.502 3.83345 465.502 3.71958 465.728 3.64936L471.109 1.9785L465.731 0.306974C465.505 0.23673 465.505 0.122864 465.731 0.0526475C465.957 -0.0175688 466.324 -0.0175463 466.55 0.0526978L472.337 1.85141C472.563 1.92166 472.563 2.03552 472.337 2.10574L466.547 3.90374C466.321 3.97396 465.954 3.97393 465.728 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M476.151 3.90369C475.925 3.83345 475.925 3.71958 476.151 3.64936L481.532 1.9785L476.154 0.306974C475.928 0.23673 475.928 0.122864 476.154 0.0526475C476.38 -0.0175688 476.747 -0.0175463 476.973 0.0526978L482.76 1.85141C482.986 1.92166 482.986 2.03552 482.76 2.10574L476.97 3.90374C476.744 3.97396 476.377 3.97393 476.151 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M486.574 3.90369C486.348 3.83345 486.348 3.71958 486.574 3.64936L491.955 1.9785L486.577 0.306974C486.351 0.23673 486.351 0.122864 486.577 0.0526475C486.803 -0.0175688 487.17 -0.0175463 487.396 0.0526978L493.183 1.85141C493.409 1.92166 493.409 2.03552 493.183 2.10574L487.393 3.90374C487.167 3.97396 486.8 3.97393 486.574 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M496.997 3.90369C496.771 3.83345 496.771 3.71958 496.997 3.64936L502.378 1.9785L497 0.306974C496.774 0.23673 496.774 0.122864 497 0.0526475C497.226 -0.0175688 497.593 -0.0175463 497.819 0.0526978L503.606 1.85141C503.832 1.92166 503.832 2.03552 503.606 2.10574L497.816 3.90374C497.59 3.97396 497.223 3.97393 496.997 3.90369Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M507.42 3.90369C507.194 3.83345 507.194 3.71958 507.42 3.64936L512.801 1.9785L507.423 0.306974C507.197 0.23673 507.197 0.122864 507.423 0.0526475C507.649 -0.0175688 508.016 -0.0175463 508.242 0.0526978L514.029 1.85141C514.255 1.92166 514.255 2.03552 514.029 2.10574L508.239 3.90374C508.013 3.97396 507.646 3.97393 507.42 3.90369Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_6203_10870" x1="0" y1="2" x2="521" y2="2" gradientUnits="userSpaceOnUse">
+<stop stop-color="#065BFF"/>
+<stop offset="1" stop-color="#45C226"/>
+</linearGradient>
+</defs>
+</svg>