text: // @flow strict
  import { type Node } from 'react';
  
  export default function Hero(): Node {
    return (
      <svg
        width="501"
        height="392"
        viewBox="0 0 501 392"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        xmlnsXlink="http://www.w3.org/1999/xlink"
        aria-hidden
      >
        <rect y="97" width="125" height="138" rx="18.9762" fill="url(#pattern0)" />
  
        <path
          className="animation-draw"
          d="M75 269L75 391L184 391L184 365.5"
          stroke="var(--color-background-education)"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeDasharray="8 8"
        />
        <path
          d="M75 269L75 391L184 391L184 365.5"
          stroke="var(--color-text-inverse)"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeDasharray="8 8"
        />
        <path
          className="animation-6"
          fillRule="evenodd"
          clipRule="evenodd"
          d="M62.9328 332C62.9328 330.895 62.0374 330 60.9328 330H25C23.8954 330 23 330.895 23 332V356.286C23 357.39 23.8954 358.286 25 358.286H60.9328C62.0374 358.286 62.9328 357.39 62.9328 356.286V349.14C62.9328 348.426 63.314 347.765 63.9328 347.408L66.5882 345.875C67.9216 345.105 67.9216 343.181 66.5882 342.411L63.9328 340.878C63.314 340.521 62.9328 339.86 62.9328 339.146V332Z"
          fill="#007CFF"
        />
        <path
          className="animation-6"
          d="M32.3746 352.651V340.439H34.5297L34.7273 341.337H34.7812C35.1403 341.014 35.5534 340.75 36.0203 340.547C36.4873 340.331 36.9602 340.224 37.4391 340.224C37.9899 340.224 38.4867 340.331 38.9297 340.547C39.3727 340.762 39.7499 341.068 40.0612 341.463C40.3725 341.858 40.6059 342.337 40.7616 342.9C40.9292 343.45 41.013 344.067 41.013 344.749C41.013 345.516 40.9053 346.198 40.6897 346.797C40.4742 347.383 40.1869 347.886 39.8277 348.305C39.4685 348.712 39.0555 349.024 38.5885 349.239C38.1335 349.455 37.6546 349.562 37.1518 349.562C36.3376 349.562 35.6073 349.239 34.9607 348.593H34.8889L35.0146 350.047V352.651H32.3746ZM36.5412 347.407C37.044 347.407 37.4631 347.204 37.7983 346.797C38.1335 346.378 38.3012 345.707 38.3012 344.785C38.3012 343.181 37.7564 342.379 36.6669 342.379C36.1042 342.379 35.5534 342.654 35.0146 343.205V346.815C35.2661 347.03 35.5235 347.186 35.7869 347.282C36.0622 347.365 36.3137 347.407 36.5412 347.407ZM42.5146 349.347L45.6036 344.713L42.7121 340.439H45.5497L46.4656 341.876C46.5973 342.127 46.747 342.385 46.9146 342.648C47.0822 342.9 47.2438 343.151 47.3995 343.402H47.4713C47.591 343.151 47.7108 342.894 47.8305 342.63C47.9622 342.367 48.0879 342.115 48.2076 341.876L48.9978 340.439H51.7636L48.8542 345.019L51.9432 349.347H49.1056L48.0819 347.874C47.9143 347.623 47.7407 347.365 47.5611 347.102C47.3935 346.839 47.2259 346.581 47.0582 346.33H46.9864C46.8547 346.581 46.717 346.839 46.5733 347.102C46.4297 347.353 46.292 347.611 46.1603 347.874L45.2803 349.347H42.5146Z"
          fill="#D7EDFF"
        />
        <circle className="animation-3" cx="301" cy="37" r="19" fill="#007CFF" />
        <rect
          className="animation-3"
          x="294.667"
          y="30.6667"
          width="12.6667"
          height="12.6667"
          rx="6.33333"
          fill="white"
        />
        <mask id="mask0_263_5069" maskUnits="userSpaceOnUse" x="140" y="0" width="126" height="184">
          <rect x="140" width="125.363" height="184" rx="18.9762" fill="#D7EDFF" />
        </mask>
        <g mask="url(#mask0_263_5069)">
          <rect x="140" width="125.363" height="184" rx="18.9762" fill="url(#pattern1)" />
        </g>
        <mask id="mask1_263_5069" maskUnits="userSpaceOnUse" x="140" y="200" width="125" height="159">
          <rect x="140" y="200" width="125" height="159" rx="18.9762" fill="#D7EDFF" />
        </mask>
        <g mask="url(#mask1_263_5069)">
          <rect x="135.283" y="199" width="129.717" height="165" rx="19.6923" fill="url(#pattern2)" />
        </g>
        <mask id="mask2_263_5069" maskUnits="userSpaceOnUse" x="281" y="67" width="192" height="247">
          <rect x="281" y="67" width="192" height="247" rx="18.7699" fill="#CCF6EE" />
        </mask>
        <g mask="url(#mask2_263_5069)">
          <rect x="281" y="67" width="166.102" height="247" rx="18.7699" fill="url(#pattern3)" />
        </g>
        <rect
          className="animation-5"
          x="349"
          y="239"
          width="152"
          height="51"
          rx="25.5"
          fill="#007CFF"
        />
        <path
          className="animation-5"
          fillRule="evenodd"
          clipRule="evenodd"
          d="M480.32 259.374L472.5 267.098L464.682 259.374C463.839 258.542 462.474 258.542 461.632 259.374C460.789 260.205 460.789 261.556 461.632 262.388L472.5 273.125L483.368 262.388C483.789 261.971 484 261.425 484 260.88C484 260.335 483.789 259.79 483.368 259.374C482.948 258.958 482.396 258.75 481.844 258.75C481.292 258.75 480.741 258.958 480.32 259.374Z"
          fill="#D7EDFF"
        />
        <rect className="animation-5" x="366" y="260" width="83" height="8" rx="4" fill="#D7EDFF" />
        <circle
          className="animation-2"
          r="30"
          transform="matrix(-1 0 0 1 95.0001 55)"
          fill="#007CFF"
        />
        <g clipPath="url(#clip0_263_5069)" className="animation-2">
          <path
            d="M83.87 71.5L82.895 60.19L77 51.1L87.515 46.72L95 38.5L102.485 46.735L113 51.1L107.105 60.175L106.13 71.5L95 68.5L83.87 71.5Z"
            fill="#F7FBFF"
          />
          <path
            d="M101.735 58.75C101.735 58.795 101.75 58.825 101.75 58.855C101.75 62.515 98.735 65.5 95 65.5C91.265 65.5 88.25 62.53 88.25 58.855C88.25 58.81 88.265 58.78 88.265 58.75C90.29 59.755 92.57 60.34 95 60.34C97.43 60.34 99.71 59.755 101.735 58.75ZM88.76 53.965C89.72 53.71 90.695 53.95 91.415 54.52C91.64 53.95 91.7 53.32 91.52 52.69C91.1 51.115 89.45 50.185 87.845 50.605C86.24 51.025 85.295 52.645 85.73 54.22C85.895 54.85 86.27 55.375 86.75 55.75C87.08 54.895 87.8 54.22 88.76 53.965ZM103.25 55.75C103.73 55.375 104.105 54.85 104.27 54.22C104.705 52.645 103.745 51.025 102.155 50.605C100.55 50.185 98.915 51.115 98.48 52.69C98.315 53.32 98.36 53.95 98.585 54.52C99.305 53.95 100.28 53.71 101.24 53.965C102.2 54.22 102.92 54.895 103.25 55.75Z"
            fill="#002966"
          />
        </g>
        <rect
          className="animation-4"
          x="281"
          y="330"
          width="53.8548"
          height="53.8548"
          rx="17.9516"
          fill="#0074E8"
        />
        <path
          className="animation-4"
          fillRule="evenodd"
          clipRule="evenodd"
          d="M304.561 368.147L295.285 358.889C294.19 357.796 294.19 356.023 295.285 354.929C296.38 353.836 298.157 353.836 299.252 354.929L304.561 360.228L316.603 348.211C317.698 347.117 319.475 347.117 320.57 348.211C321.665 349.304 321.665 351.076 320.57 352.169L304.561 368.147Z"
          fill="white"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M71.6 246C59.1184 246 49 256.118 49 268.6C49 281.082 59.1184 291.2 71.6 291.2H101.733C114.215 291.2 124.333 281.082 124.333 268.6C124.333 256.118 114.215 246 101.733 246H71.6Z"
          fill="#007CFF"
          className="animation-1"
        />
  
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M101.733 289.317C113.175 289.317 122.45 280.042 122.45 268.6C122.45 257.158 113.175 247.883 101.733 247.883C90.2918 247.883 81.0167 257.158 81.0167 268.6C81.0167 280.042 90.2918 289.317 101.733 289.317Z"
          fill="#D7EDFF"
          className="animation-1"
        />
        <defs>
          <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
            <use
              xlinkHref="#image0_263_5069"
              transform="translate(-0.548242 -0.217391) scale(0.000500549)"
            />
          </pattern>
          <pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1">
            <use
              xlinkHref="#image1_263_5069"
              transform="translate(-0.255259 -0.210758) scale(0.000492865 0.000335798)"
            />
          </pattern>
          <pattern id="pattern2" patternContentUnits="objectBoundingBox" width="1" height="1">
            <use
              xlinkHref="#image2_263_5069"
              transform="translate(0.00602612 -0.27673) scale(0.000424361)"
            />
          </pattern>
          <pattern id="pattern3" patternContentUnits="objectBoundingBox" width="1" height="1">
            <use
              xlinkHref="#image3_263_5069"
              transform="translate(0 -0.00448245) scale(0.0003663 0.000246329)"
            />
          </pattern>
          <clipPath id="clip0_263_5069">
            <rect width="36" height="33" fill="white" transform="translate(77 38.5)" />
          </clipPath>
          <image
            id="image0_263_5069"
            width="4096"
            height="2733"
            xlinkHref="https://i.ibb.co/9h2TGqd/img-popcycle.jpg"
            alt="Popsicle"
          />
          <image
            id="image1_263_5069"
            width="2730"
            height="4096"
            xlinkHref="https://i.ibb.co/cbjgZft/img-door.jpg"
            alt="Door"
          />
          <image
            id="image2_263_5069"
            width="2730"
            height="4096"
            xlinkHref="https://i.ibb.co/SsnchKx/img-dude.jpg"
            alt="Person"
          />
          <image
            id="image3_263_5069"
            width="2730"
            height="4096"
            xlinkHref="https://i.ibb.co/qn2Z0yN/img-glasses.jpg"
            alt="Glasses"
          />
        </defs>
      </svg>
    );
  }
  