1import { css } from '@emotion/react';
2import { breakpoints, darkTheme, palette } from '@expo/styleguide-base';
3
4export const DevicesImage = () => (
5  <svg
6    css={css(`
7      position: absolute;
8      right: 0;
9      bottom: 0;
10      max-width: 60%;
11      z-index: 1;
12
13      @media screen and (max-width: ${breakpoints.medium}px) {
14        bottom: -16px;
15      }
16
17      @media screen and (max-width: ${breakpoints.small}px) {
18        bottom: -32px;
19      }
20    `)}
21    width="354"
22    height="164"
23    viewBox="0 0 354 164"
24    fill="none"
25    xmlns="http://www.w3.org/2000/svg">
26    <g clipPath="url(#clip0_39:1396)">
27      <rect
28        x="214.901"
29        y="22.3787"
30        width="158"
31        height="188"
32        rx="4"
33        transform="rotate(13 214.901 22.3787)"
34        fill={darkTheme.background.element}
35      />
36      <rect
37        x="211.247"
38        y="38.208"
39        width="195"
40        height="171.754"
41        transform="rotate(13 211.247 38.208)"
42        fill="#745BFF"
43      />
44      <rect
45        x="211.247"
46        y="38.208"
47        width="195"
48        height="171.754"
49        transform="rotate(13 211.247 38.208)"
50        fill="url(#efeb358a5390d90e5e3ede15cf021e74)"
51      />
52      <rect
53        x="251.549"
54        y="60.3827"
55        width="65.4637"
56        height="41.3883"
57        rx="3.31849"
58        transform="rotate(13 251.549 60.3827)"
59        fill="white"
60      />
61      <rect
62        x="235.735"
63        y="129.05"
64        width="65.4637"
65        height="19.1339"
66        rx="3.31849"
67        transform="rotate(13 235.735 129.05)"
68        fill="white"
69      />
70      <rect
71        opacity="0.8"
72        x="241.129"
73        y="105.664"
74        width="65.4637"
75        height="6.92818"
76        rx="3.31849"
77        transform="rotate(13 241.129 105.664)"
78        fill="white"
79      />
80      <rect
81        opacity="0.8"
82        x="245.75"
83        y="115.968"
84        width="51.8308"
85        height="6.92818"
86        rx="3.31849"
87        transform="rotate(13 245.75 115.968)"
88        fill="white"
89      />
90      <mask
91        id="50910997103ad906285f4061e1c96c9f"
92        style={{ maskType: 'alpha' }}
93        maskUnits="userSpaceOnUse"
94        x="242"
95        y="61"
96        width="73"
97        height="54">
98        <rect
99          id="a3822b3aca26c564aca3145ef4b4cf19"
100          x="251.203"
101          y="60.7385"
102          width="65.7215"
103          height="40.9636"
104          rx="3.31849"
105          transform="rotate(13 251.203 60.7385)"
106          fill="white"
107        />
108      </mask>
109      <g mask="url(#50910997103ad906285f4061e1c96c9f)">
110        <path
111          id="cbaa9d8985081c60ff5a0f147092262f"
112          d="M279.283 82.7974L250.612 102.681L310.276 116.455L315.191 95.1648L309.285 82.5886L288.311 99.6618L279.283 82.7974Z"
113          fill={palette.light.blue11}
114        />
115        <path
116          id="6c507023d7a3817ecba32a2b54239a92"
117          d="M266.579 86.2656L245.155 101.381L289.59 111.639L302.673 114.66L288.942 86.0274L273.263 98.9966L266.579 86.2656Z"
118          fill={palette.light.blue10}
119        />
120      </g>
121      <circle
122        cx="260.869"
123        cy="75.1075"
124        r="7.01414"
125        transform="rotate(13 260.869 75.1075)"
126        fill="#FFE1A7"
127      />
128      <g clipPath="url(#clip1_39:1396)">
129        <path
130          fillRule="evenodd"
131          clipRule="evenodd"
132          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"
133          fill="#596068"
134        />
135        <path
136          fillRule="evenodd"
137          clipRule="evenodd"
138          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"
139          fill="#596068"
140        />
141      </g>
142      <circle
143        cx="221.518"
144        cy="32.0497"
145        r="2.62"
146        transform="rotate(13 221.518 32.0497)"
147        fill="#7C848D"
148      />
149      <circle
150        cx="229.543"
151        cy="33.9022"
152        r="2.62"
153        transform="rotate(13 229.543 33.9022)"
154        fill="#7C848D"
155      />
156      <circle
157        cx="237.567"
158        cy="35.7549"
159        r="2.62"
160        transform="rotate(13 237.567 35.7549)"
161        fill="#7C848D"
162      />
163    </g>
164    <rect
165      x="13.8011"
166      y="45.1538"
167      width="88.9538"
168      height="186.813"
169      rx="9.95547"
170      transform="rotate(-13 13.8011 45.1538)"
171      fill="url(#798da3dad1527946ee33aecf8f9ec234)"
172    />
173    <rect
174      x="18.0653"
175      y="47.8184"
176      width="81.8428"
177      height="179.702"
178      rx="6.39994"
179      transform="rotate(-13 18.0653 47.8184)"
180      stroke={darkTheme.background.element}
181      strokeWidth="7.11105"
182    />
183    <rect
184      x="27.9378"
185      y="53.9677"
186      width="65.4637"
187      height="41.3883"
188      rx="3.31849"
189      transform="rotate(-13 27.9378 53.9677)"
190      fill="white"
191    />
192    <rect
193      x="43.8268"
194      y="122.618"
195      width="65.4637"
196      height="19.1339"
197      rx="3.31849"
198      transform="rotate(-13 43.8268 122.618)"
199      fill="white"
200    />
201    <rect
202      opacity="0.8"
203      x="38.4219"
204      y="99.2343"
205      width="65.4637"
206      height="6.92818"
207      rx="3.31849"
208      transform="rotate(-13 38.4219 99.2343)"
209      fill="white"
210    />
211    <rect
212      opacity="0.8"
213      x="47.0919"
214      y="106.469"
215      width="51.8308"
216      height="6.92818"
217      rx="3.31849"
218      transform="rotate(-13 47.0919 106.469)"
219      fill="white"
220    />
221    <mask
222      id="c91e2833bce82b5f6ccc942f780f85d1"
223      style={{ maskType: 'alpha' }}
224      maskUnits="userSpaceOnUse"
225      x="28"
226      y="40"
227      width="73"
228      height="54">
229      <rect
230        x="27.7824"
231        y="54.4393"
232        width="65.7216"
233        height="40.9636"
234        rx="3.31849"
235        transform="rotate(-13 27.7824 54.4393)"
236        fill="white"
237      />
238    </mask>
239    <g mask="url(#c91e2833bce82b5f6ccc942f780f85d1)">
240      <path
241        d="M62.6906 61.9562L45.6377 92.3956L105.302 78.6211L100.386 57.3308L89.5646 48.6166L78.1975 73.1563L62.6906 61.9562Z"
242        fill={palette.light.blue11}
243      />
244      <path
245        d="M52.7926 70.6425L40.1633 93.6194L84.598 83.3609L97.6809 80.3404L72.7879 60.6251L64.3809 79.1551L52.7926 70.6425Z"
246        fill={palette.light.blue10}
247      />
248    </g>
249    <circle
250      cx="42.7692"
251      cy="63.1166"
252      r="7.01414"
253      transform="rotate(-13 42.7692 63.1166)"
254      fill="#FFE1A7"
255    />
256    <g clipPath="url(#clip2_39:1396)">
257      <path
258        fillRule="evenodd"
259        clipRule="evenodd"
260        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"
261        fill="#596068"
262      />
263      <path
264        fillRule="evenodd"
265        clipRule="evenodd"
266        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"
267        fill="#596068"
268      />
269    </g>
270    <rect
271      x="113.731"
272      y="13.4504"
273      width="88.9538"
274      height="186.813"
275      rx="9.95547"
276      fill="url(#e2839d57a5b978f1058be04fb2a500dd)"
277    />
278    <rect
279      x="117.287"
280      y="17.006"
281      width="81.8428"
282      height="179.702"
283      rx="6.39994"
284      stroke={darkTheme.background.element}
285      strokeWidth="7.11105"
286    />
287    <rect x="125.523" y="33.6431" width="65.4637" height="41.3883" rx="3.31849" fill="white" />
288    <rect x="125.562" y="104.108" width="65.4637" height="19.1339" rx="3.31849" fill="white" />
289    <rect
290      opacity="0.8"
291      x="125.556"
292      y="80.1079"
293      width="65.4637"
294      height="6.92818"
295      rx="3.31849"
296      fill="white"
297    />
298    <rect
299      opacity="0.8"
300      x="132.376"
301      y="89.1079"
302      width="51.8308"
303      height="6.92818"
304      rx="3.31849"
305      fill="white"
306    />
307    <mask
308      id="cac8353d923d12b52a34815740143c7d"
309      style={{ maskType: 'alpha' }}
310      maskUnits="userSpaceOnUse"
311      x="125"
312      y="34"
313      width="66"
314      height="42">
315      <rect x="125.266" y="34.0677" width="65.7216" height="40.9636" rx="3.31849" fill="white" />
316    </mask>
317    <g mask="url(#cac8353d923d12b52a34815740143c7d)">
318      <path
319        d="M157.588 49.2446L134.125 75.0678H195.358V53.2174L186.774 42.2922L170.178 63.646L157.588 49.2446Z"
320        fill={palette.light.blue11}
321      />
322      <path
323        d="M145.99 55.4817L128.516 75.0287H174.119H187.546L167.726 50.219L155.366 66.3829L145.99 55.4817Z"
324        fill={palette.light.blue10}
325      />
326    </g>
327    <circle cx="137.916" cy="45.894" r="7.01414" fill="#FFE1A7" />
328    <g clipPath="url(#clip3_39:1396)">
329      <path
330        fillRule="evenodd"
331        clipRule="evenodd"
332        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"
333        fill="#596068"
334      />
335      <path
336        fillRule="evenodd"
337        clipRule="evenodd"
338        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"
339        fill="#596068"
340      />
341    </g>
342    <path
343      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"
344      fill={darkTheme.background.element}
345    />
346  </svg>
347);
348
349export const DevicesImageMasks = () => (
350  <svg width="0" height="0">
351    <filter
352      id="3fe977fb0acabded0c62aa0c9c945938"
353      x="162.611"
354      y="17.3787"
355      width="216.241"
356      height="238.724"
357      filterUnits="userSpaceOnUse"
358      colorInterpolationFilters="sRGB">
359      <feFlood floodOpacity="0" result="BackgroundImageFix" />
360      <feColorMatrix
361        in="SourceAlpha"
362        type="matrix"
363        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
364        result="hardAlpha"
365      />
366      <feOffset dy="5" />
367      <feGaussianBlur stdDeviation="5" />
368      <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" />
369      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_39:1396" />
370      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_39:1396" result="shape" />
371    </filter>
372    <linearGradient
373      id="efeb358a5390d90e5e3ede15cf021e74"
374      x1="229.398"
375      y1="45.9863"
376      x2="261.629"
377      y2="225.302"
378      gradientUnits="userSpaceOnUse">
379      <stop stopColor={palette.light.blue9} />
380      <stop offset="1" stopColor={palette.light.blue10} />
381    </linearGradient>
382    <linearGradient
383      id="798da3dad1527946ee33aecf8f9ec234"
384      x1="22.0813"
385      y1="53.6141"
386      x2="94.9801"
387      y2="223.711"
388      gradientUnits="userSpaceOnUse">
389      <stop stopColor={palette.light.blue9} />
390      <stop offset="1" stopColor={palette.light.blue10} />
391    </linearGradient>
392    <linearGradient
393      id="e2839d57a5b978f1058be04fb2a500dd"
394      x1="122.012"
395      y1="21.9108"
396      x2="194.91"
397      y2="192.008"
398      gradientUnits="userSpaceOnUse">
399      <stop stopColor={palette.light.blue9} />
400      <stop offset="1" stopColor={palette.light.blue10} />
401    </linearGradient>
402    <clipPath id="clip0_39:1396">
403      <rect
404        x="214.901"
405        y="22.3787"
406        width="158"
407        height="188"
408        rx="4"
409        transform="rotate(13 214.901 22.3787)"
410        fill="white"
411      />
412    </clipPath>
413    <clipPath id="clip1_39:1396">
414      <rect
415        width="12.7276"
416        height="12.7276"
417        fill="white"
418        transform="translate(263.63 138.778) rotate(13)"
419      />
420    </clipPath>
421    <clipPath id="clip2_39:1396">
422      <rect
423        width="12.7276"
424        height="12.7276"
425        fill="white"
426        transform="translate(73.1624 119.133) rotate(-13)"
427      />
428    </clipPath>
429    <clipPath id="clip3_39:1396">
430      <rect width="12.7276" height="12.7276" fill="white" transform="translate(154.93 107.311)" />
431    </clipPath>
432  </svg>
433);
434