1import { css } from '@emotion/react';
2import { breakpoints, darkTheme } from '@expo/styleguide';
3import React from 'react';
4
5export const DevicesImage = () => (
6  <svg
7    css={css(`
8      position: absolute;
9      right: 0;
10      bottom: 0;
11      max-width: 60%;
12      z-index: 1;
13
14      @media screen and (max-width: ${breakpoints.medium}px) {
15        bottom: -16px;
16      }
17
18      @media screen and (max-width: ${breakpoints.small}px) {
19        bottom: -32px;
20      }
21    `)}
22    width="354"
23    height="164"
24    viewBox="0 0 354 164"
25    fill="none"
26    xmlns="http://www.w3.org/2000/svg">
27    <g clipPath="url(#clip0_39:1396)">
28      <rect
29        x="214.901"
30        y="22.3787"
31        width="158"
32        height="188"
33        rx="4"
34        transform="rotate(13 214.901 22.3787)"
35        fill={darkTheme.background.tertiary}
36      />
37      <rect
38        x="211.247"
39        y="38.208"
40        width="195"
41        height="171.754"
42        transform="rotate(13 211.247 38.208)"
43        fill="#745BFF"
44      />
45      <rect
46        x="211.247"
47        y="38.208"
48        width="195"
49        height="171.754"
50        transform="rotate(13 211.247 38.208)"
51        fill="url(#efeb358a5390d90e5e3ede15cf021e74)"
52      />
53      <rect
54        x="251.549"
55        y="60.3827"
56        width="65.4637"
57        height="41.3883"
58        rx="3.31849"
59        transform="rotate(13 251.549 60.3827)"
60        fill="white"
61      />
62      <rect
63        x="235.735"
64        y="129.05"
65        width="65.4637"
66        height="19.1339"
67        rx="3.31849"
68        transform="rotate(13 235.735 129.05)"
69        fill="white"
70      />
71      <rect
72        opacity="0.8"
73        x="241.129"
74        y="105.664"
75        width="65.4637"
76        height="6.92818"
77        rx="3.31849"
78        transform="rotate(13 241.129 105.664)"
79        fill="white"
80      />
81      <rect
82        opacity="0.8"
83        x="245.75"
84        y="115.968"
85        width="51.8308"
86        height="6.92818"
87        rx="3.31849"
88        transform="rotate(13 245.75 115.968)"
89        fill="white"
90      />
91      <mask
92        id="50910997103ad906285f4061e1c96c9f"
93        style={{ maskType: 'alpha' }}
94        maskUnits="userSpaceOnUse"
95        x="242"
96        y="61"
97        width="73"
98        height="54">
99        <rect
100          id="a3822b3aca26c564aca3145ef4b4cf19"
101          x="251.203"
102          y="60.7385"
103          width="65.7215"
104          height="40.9636"
105          rx="3.31849"
106          transform="rotate(13 251.203 60.7385)"
107          fill="white"
108        />
109      </mask>
110      <g mask="url(#50910997103ad906285f4061e1c96c9f)">
111        <path
112          id="cbaa9d8985081c60ff5a0f147092262f"
113          d="M279.283 82.7974L250.612 102.681L310.276 116.455L315.191 95.1648L309.285 82.5886L288.311 99.6618L279.283 82.7974Z"
114          fill="#C99CFF"
115        />
116        <path
117          id="6c507023d7a3817ecba32a2b54239a92"
118          d="M266.579 86.2656L245.155 101.381L289.59 111.639L302.673 114.66L288.942 86.0274L273.263 98.9966L266.579 86.2656Z"
119          fill="#A771E7"
120        />
121      </g>
122      <circle
123        cx="260.869"
124        cy="75.1075"
125        r="7.01414"
126        transform="rotate(13 260.869 75.1075)"
127        fill="#FFE1A7"
128      />
129      <g clipPath="url(#clip1_39:1396)">
130        <path
131          fillRule="evenodd"
132          clipRule="evenodd"
133          d="M274.076 142.332C274.135 142.075 273.975 141.819 273.718 141.76C273.461 141.701 273.205 141.861 273.145 142.118L272.859 143.358L271.619 143.071C271.362 143.012 271.106 143.172 271.047 143.429C270.987 143.686 271.147 143.942 271.404 144.001L272.644 144.288L272.358 145.528C272.299 145.785 272.459 146.041 272.716 146.1C272.973 146.16 273.229 145.999 273.288 145.743L273.575 144.502L274.815 144.789C275.071 144.848 275.328 144.688 275.387 144.431C275.446 144.174 275.286 143.918 275.029 143.859L273.789 143.572L274.076 142.332Z"
134          fill="#596068"
135        />
136        <path
137          fillRule="evenodd"
138          clipRule="evenodd"
139          d="M265.393 142.89L264.918 143.647L263.868 143.404C263.184 143.246 262.5 143.673 262.342 144.358L261.197 149.319C261.039 150.004 261.466 150.687 262.151 150.845L268.971 152.42C269.656 152.578 270.34 152.151 270.498 151.466L271.643 146.506C271.801 145.821 271.374 145.137 270.689 144.979L269.64 144.737L269.545 143.848C269.516 143.579 269.32 143.357 269.055 143.296L266.075 142.608C265.811 142.547 265.537 142.66 265.393 142.89ZM266.062 149.462C267.09 149.7 268.115 149.059 268.352 148.032C268.589 147.004 267.949 145.979 266.921 145.742C265.894 145.505 264.869 146.145 264.632 147.173C264.394 148.2 265.035 149.225 266.062 149.462Z"
140          fill="#596068"
141        />
142      </g>
143      <circle
144        cx="221.518"
145        cy="32.0497"
146        r="2.62"
147        transform="rotate(13 221.518 32.0497)"
148        fill="#7C848D"
149      />
150      <circle
151        cx="229.543"
152        cy="33.9022"
153        r="2.62"
154        transform="rotate(13 229.543 33.9022)"
155        fill="#7C848D"
156      />
157      <circle
158        cx="237.567"
159        cy="35.7549"
160        r="2.62"
161        transform="rotate(13 237.567 35.7549)"
162        fill="#7C848D"
163      />
164    </g>
165    <rect
166      x="13.8011"
167      y="45.1538"
168      width="88.9538"
169      height="186.813"
170      rx="9.95547"
171      transform="rotate(-13 13.8011 45.1538)"
172      fill="url(#798da3dad1527946ee33aecf8f9ec234)"
173    />
174    <rect
175      x="18.0653"
176      y="47.8184"
177      width="81.8428"
178      height="179.702"
179      rx="6.39994"
180      transform="rotate(-13 18.0653 47.8184)"
181      stroke={darkTheme.background.tertiary}
182      strokeWidth="7.11105"
183    />
184    <rect
185      x="27.9378"
186      y="53.9677"
187      width="65.4637"
188      height="41.3883"
189      rx="3.31849"
190      transform="rotate(-13 27.9378 53.9677)"
191      fill="white"
192    />
193    <rect
194      x="43.8268"
195      y="122.618"
196      width="65.4637"
197      height="19.1339"
198      rx="3.31849"
199      transform="rotate(-13 43.8268 122.618)"
200      fill="white"
201    />
202    <rect
203      opacity="0.8"
204      x="38.4219"
205      y="99.2343"
206      width="65.4637"
207      height="6.92818"
208      rx="3.31849"
209      transform="rotate(-13 38.4219 99.2343)"
210      fill="white"
211    />
212    <rect
213      opacity="0.8"
214      x="47.0919"
215      y="106.469"
216      width="51.8308"
217      height="6.92818"
218      rx="3.31849"
219      transform="rotate(-13 47.0919 106.469)"
220      fill="white"
221    />
222    <mask
223      id="c91e2833bce82b5f6ccc942f780f85d1"
224      style={{ maskType: 'alpha' }}
225      maskUnits="userSpaceOnUse"
226      x="28"
227      y="40"
228      width="73"
229      height="54">
230      <rect
231        x="27.7824"
232        y="54.4393"
233        width="65.7216"
234        height="40.9636"
235        rx="3.31849"
236        transform="rotate(-13 27.7824 54.4393)"
237        fill="white"
238      />
239    </mask>
240    <g mask="url(#c91e2833bce82b5f6ccc942f780f85d1)">
241      <path
242        d="M62.6906 61.9562L45.6377 92.3956L105.302 78.6211L100.386 57.3308L89.5646 48.6166L78.1975 73.1563L62.6906 61.9562Z"
243        fill="#C99CFF"
244      />
245      <path
246        d="M52.7926 70.6425L40.1633 93.6194L84.598 83.3609L97.6809 80.3404L72.7879 60.6251L64.3809 79.1551L52.7926 70.6425Z"
247        fill="#A771E7"
248      />
249    </g>
250    <circle
251      cx="42.7692"
252      cy="63.1166"
253      r="7.01414"
254      transform="rotate(-13 42.7692 63.1166)"
255      fill="#FFE1A7"
256    />
257    <g clipPath="url(#clip2_39:1396)">
258      <path
259        fillRule="evenodd"
260        clipRule="evenodd"
261        d="M84.1094 117.748C84.0501 117.491 83.7938 117.331 83.537 117.391C83.2802 117.45 83.12 117.706 83.1793 117.963L83.4656 119.203L82.2258 119.489C81.969 119.549 81.8088 119.805 81.8681 120.062C81.9274 120.319 82.1837 120.479 82.4405 120.419L83.6804 120.133L83.9667 121.373C84.026 121.63 84.2822 121.79 84.5391 121.731C84.7959 121.672 84.9561 121.415 84.8968 121.159L84.6105 119.918L85.8509 119.632C86.1078 119.573 86.2679 119.317 86.2086 119.06C86.1493 118.803 85.893 118.643 85.6362 118.702L84.3957 118.988L84.1094 117.748Z"
262        fill="#596068"
263      />
264      <path
265        fillRule="evenodd"
266        clipRule="evenodd"
267        d="M76.5483 122.056L76.4534 122.945L75.4045 123.187C74.7196 123.345 74.2926 124.028 74.4507 124.713L75.5959 129.674C75.7541 130.359 76.4375 130.786 77.1224 130.628L83.9431 129.053C84.628 128.895 85.0551 128.211 84.897 127.527L83.7517 122.566C83.5936 121.881 82.9102 121.454 82.2253 121.612L81.1756 121.854L80.7007 121.097C80.5566 120.867 80.2827 120.754 80.0184 120.815L77.0379 121.503C76.7737 121.564 76.5771 121.786 76.5483 122.056ZM80.0313 127.67C81.0587 127.433 81.6993 126.408 81.4621 125.38C81.2249 124.353 80.1998 123.712 79.1724 123.95C78.1451 124.187 77.5045 125.212 77.7417 126.239C77.9789 127.267 79.004 127.907 80.0313 127.67Z"
268        fill="#596068"
269      />
270    </g>
271    <rect
272      x="113.731"
273      y="13.4504"
274      width="88.9538"
275      height="186.813"
276      rx="9.95547"
277      fill="url(#e2839d57a5b978f1058be04fb2a500dd)"
278    />
279    <rect
280      x="117.287"
281      y="17.006"
282      width="81.8428"
283      height="179.702"
284      rx="6.39994"
285      stroke={darkTheme.background.tertiary}
286      strokeWidth="7.11105"
287    />
288    <rect x="125.523" y="33.6431" width="65.4637" height="41.3883" rx="3.31849" fill="white" />
289    <rect x="125.562" y="104.108" width="65.4637" height="19.1339" rx="3.31849" fill="white" />
290    <rect
291      opacity="0.8"
292      x="125.556"
293      y="80.1079"
294      width="65.4637"
295      height="6.92818"
296      rx="3.31849"
297      fill="white"
298    />
299    <rect
300      opacity="0.8"
301      x="132.376"
302      y="89.1079"
303      width="51.8308"
304      height="6.92818"
305      rx="3.31849"
306      fill="white"
307    />
308    <mask
309      id="cac8353d923d12b52a34815740143c7d"
310      style={{ maskType: 'alpha' }}
311      maskUnits="userSpaceOnUse"
312      x="125"
313      y="34"
314      width="66"
315      height="42">
316      <rect x="125.266" y="34.0677" width="65.7216" height="40.9636" rx="3.31849" fill="white" />
317    </mask>
318    <g mask="url(#cac8353d923d12b52a34815740143c7d)">
319      <path
320        d="M157.588 49.2446L134.125 75.0678H195.358V53.2174L186.774 42.2922L170.178 63.646L157.588 49.2446Z"
321        fill="#C99CFF"
322      />
323      <path
324        d="M145.99 55.4817L128.516 75.0287H174.119H187.546L167.726 50.219L155.366 66.3829L145.99 55.4817Z"
325        fill="#A771E7"
326      />
327    </g>
328    <circle cx="137.916" cy="45.894" r="7.01414" fill="#FFE1A7" />
329    <g clipPath="url(#clip3_39:1396)">
330      <path
331        fillRule="evenodd"
332        clipRule="evenodd"
333        d="M165.908 108.425C165.908 108.161 165.694 107.948 165.43 107.948C165.167 107.948 164.953 108.161 164.953 108.425V109.698H163.68C163.417 109.698 163.203 109.911 163.203 110.175C163.203 110.438 163.417 110.652 163.68 110.652H164.953V111.925C164.953 112.188 165.167 112.402 165.43 112.402C165.694 112.402 165.908 112.188 165.908 111.925V110.652H167.18C167.444 110.652 167.658 110.438 167.658 110.175C167.658 109.911 167.444 109.698 167.18 109.698H165.908V108.425Z"
334        fill="#596068"
335      />
336      <path
337        fillRule="evenodd"
338        clipRule="evenodd"
339        d="M157.572 110.921L157.279 111.766H156.202C155.5 111.766 154.93 112.336 154.93 113.039V118.13C154.93 118.833 155.5 119.402 156.202 119.402H163.203C163.906 119.402 164.475 118.833 164.475 118.13V113.039C164.475 112.336 163.906 111.766 163.203 111.766H162.126L161.833 110.921C161.745 110.665 161.503 110.493 161.232 110.493H158.173C157.902 110.493 157.66 110.665 157.572 110.921ZM159.703 117.175C160.757 117.175 161.612 116.32 161.612 115.266C161.612 114.212 160.757 113.357 159.703 113.357C158.648 113.357 157.793 114.212 157.793 115.266C157.793 116.32 158.648 117.175 159.703 117.175Z"
340        fill="#596068"
341      />
342    </g>
343    <path
344      d="M134.302 13.9601C134.856 13.6266 135.491 13.4504 136.139 13.4504H180.206C180.899 13.4504 181.576 13.6521 182.156 14.0309L185.142 15.9811C187.227 17.343 186.263 20.5831 183.773 20.5831C182.389 20.5831 181.268 21.7046 181.268 23.088V24.1495C181.268 26.1191 179.671 27.7158 177.701 27.7158H138.716C136.746 27.7158 135.149 26.1191 135.149 24.1495V23.1602C135.149 21.7369 133.996 20.5831 132.572 20.5831C129.96 20.5831 129.005 17.1432 131.245 15.7973L134.302 13.9601Z"
345      fill={darkTheme.background.tertiary}
346    />
347  </svg>
348);
349
350export const DevicesImageMasks = () => (
351  <svg width="0" height="0">
352    <filter
353      id="3fe977fb0acabded0c62aa0c9c945938"
354      x="162.611"
355      y="17.3787"
356      width="216.241"
357      height="238.724"
358      filterUnits="userSpaceOnUse"
359      colorInterpolationFilters="sRGB">
360      <feFlood floodOpacity="0" result="BackgroundImageFix" />
361      <feColorMatrix
362        in="SourceAlpha"
363        type="matrix"
364        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
365        result="hardAlpha"
366      />
367      <feOffset dy="5" />
368      <feGaussianBlur stdDeviation="5" />
369      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
370      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_39:1396" />
371      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_39:1396" result="shape" />
372    </filter>
373    <linearGradient
374      id="efeb358a5390d90e5e3ede15cf021e74"
375      x1="229.398"
376      y1="45.9863"
377      x2="261.629"
378      y2="225.302"
379      gradientUnits="userSpaceOnUse">
380      <stop stopColor="#735BFF" />
381      <stop offset="1" stopColor="#AB41FF" />
382    </linearGradient>
383    <linearGradient
384      id="798da3dad1527946ee33aecf8f9ec234"
385      x1="22.0813"
386      y1="53.6141"
387      x2="94.9801"
388      y2="223.711"
389      gradientUnits="userSpaceOnUse">
390      <stop stopColor="#735BFF" />
391      <stop offset="1" stopColor="#AB41FF" />
392    </linearGradient>
393    <linearGradient
394      id="e2839d57a5b978f1058be04fb2a500dd"
395      x1="122.012"
396      y1="21.9108"
397      x2="194.91"
398      y2="192.008"
399      gradientUnits="userSpaceOnUse">
400      <stop stopColor="#735BFF" />
401      <stop offset="1" stopColor="#AB41FF" />
402    </linearGradient>
403    <clipPath id="clip0_39:1396">
404      <rect
405        x="214.901"
406        y="22.3787"
407        width="158"
408        height="188"
409        rx="4"
410        transform="rotate(13 214.901 22.3787)"
411        fill="white"
412      />
413    </clipPath>
414    <clipPath id="clip1_39:1396">
415      <rect
416        width="12.7276"
417        height="12.7276"
418        fill="white"
419        transform="translate(263.63 138.778) rotate(13)"
420      />
421    </clipPath>
422    <clipPath id="clip2_39:1396">
423      <rect
424        width="12.7276"
425        height="12.7276"
426        fill="white"
427        transform="translate(73.1624 119.133) rotate(-13)"
428      />
429    </clipPath>
430    <clipPath id="clip3_39:1396">
431      <rect width="12.7276" height="12.7276" fill="white" transform="translate(154.93 107.311)" />
432    </clipPath>
433  </svg>
434);
435