kj
/
webtrigon-workex-onboarding
2
0
Atdalīts 0
Kods Problēmas 0 Izmaiņu pieprasījumi 0 Laidieni 0 Vikivietne Aktivitāte
Pārlūkot izejas kodu

Welcome page UI

master
kj1352 pirms 4 gadiem
vecāks
9a9bbee7a5
revīzija
aac08824df
9 mainītis faili ar 424 papildinājumiem un 6 dzēšanām
Dalītais skats
Salīdzināšanas iespējas
Rādīt statistiku Lejupielādēt ielāpa failu Lejupielādēt izmaiņu failu
  1. +25
    -3
      package-lock.json
  2. +240
    -0
      public/assets/images/welcome/upfold.svg
  3. Binārs
      src/assets/fonts/AdobeClean-Bold.ttf
  4. Binārs
      src/assets/fonts/AdobeClean-It.ttf
  5. Binārs
      src/assets/fonts/AdobeClean-Light.ttf
  6. Binārs
      src/assets/fonts/AdobeClean-Regular.ttf
  7. +98
    -1
      src/pages/onboarding/Welcome.module.scss
  8. +18
    -2
      src/pages/onboarding/Welcome.tsx
  9. +43
    -0
      src/theme/variables.css

+ 25
- 3
package-lock.json Parādīt failu

@@ -3377,6 +3377,15 @@
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
"optional": true
},
"bindings": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
"integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
"optional": true,
"requires": {
"file-uri-to-path": "1.0.0"
}
},
"bluebird": {
"version": "3.7.2",
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -6285,6 +6294,12 @@
}
}
},
"file-uri-to-path": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
"integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
"optional": true
},
"filesize": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz",
@@ -11963,9 +11978,9 @@
}
},
"querystring": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
"integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA="
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.1.tgz",
"integrity": "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg=="
},
"querystring-es3": {
"version": "0.2.1",
@@ -15070,6 +15085,11 @@
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
"integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
},
"querystring": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
"integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA="
}
}
},
@@ -15386,6 +15406,7 @@
"integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
"optional": true,
"requires": {
"bindings": "^1.5.0",
"nan": "^2.12.1"
}
},
@@ -16010,6 +16031,7 @@
"integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
"optional": true,
"requires": {
"bindings": "^1.5.0",
"nan": "^2.12.1"
}
},


+ 240
- 0
public/assets/images/welcome/upfold.svg Parādīt failu

@@ -0,0 +1,240 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="382.29" height="284.889" viewBox="0 0 382.29 284.889">
<defs>
<linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#ffdde1"/>
<stop offset="1" stop-color="#ee9ca7"/>
</linearGradient>
</defs>
<g id="Group_32" data-name="Group 32" transform="translate(0 -54.953)">
<g id="Background_complete" data-name="Background complete" transform="translate(0 54.953)">
<g id="Group_12" data-name="Group 12">
<g id="Group_2" data-name="Group 2">
<rect id="Rectangle_1" data-name="Rectangle 1" width="382.29" height="0.191" transform="translate(0 250.358)" fill="#575757"/>
<rect id="Rectangle_2" data-name="Rectangle 2" width="25.325" height="0.191" transform="translate(70.115 261.926)" fill="#575757"/>
<rect id="Rectangle_3" data-name="Rectangle 3" width="14.675" height="0.191" transform="translate(47.426 261.926)" fill="#575757"/>
<rect id="Rectangle_4" data-name="Rectangle 4" width="14.674" height="0.191" transform="translate(146.312 264.74)" fill="#575757"/>
<rect id="Rectangle_5" data-name="Rectangle 5" width="33.025" height="0.191" transform="translate(204.467 269.009)" fill="#e7e7e7"/>
<rect id="Rectangle_6" data-name="Rectangle 6" width="4.842" height="0.191" transform="translate(192.817 269.009)" fill="#e7e7e7"/>
<rect id="Rectangle_7" data-name="Rectangle 7" width="71.623" height="0.191" transform="translate(274.995 264.74)" fill="#575757"/>
<g id="Group_1" data-name="Group 1" transform="translate(29.212)">
<path id="Path_1" data-name="Path 1" d="M190.211,271.212H42.571a4.37,4.37,0,0,1-4.364-4.364V59.316a4.369,4.369,0,0,1,4.364-4.363h147.64a4.369,4.369,0,0,1,4.363,4.363V266.848A4.369,4.369,0,0,1,190.211,271.212ZM42.571,55.144A4.177,4.177,0,0,0,38.4,59.316V266.848a4.177,4.177,0,0,0,4.173,4.173h147.64a4.178,4.178,0,0,0,4.172-4.173V59.316a4.178,4.178,0,0,0-4.172-4.172Z" transform="translate(-38.207 -54.953)" fill="gray"/>
<path id="Path_2" data-name="Path 2" d="M406.507,271.212H258.868a4.369,4.369,0,0,1-4.363-4.364V59.316a4.368,4.368,0,0,1,4.363-4.363H406.507a4.369,4.369,0,0,1,4.365,4.363V266.848A4.37,4.37,0,0,1,406.507,271.212ZM258.868,55.144a4.177,4.177,0,0,0-4.172,4.172V266.848a4.177,4.177,0,0,0,4.172,4.173H406.507a4.178,4.178,0,0,0,4.174-4.173V59.316a4.178,4.178,0,0,0-4.174-4.172Z" transform="translate(-89.128 -54.953)" fill="gray"/>
</g>
</g>
<g id="Group_3" data-name="Group 3" transform="translate(113.964 185.047)">
<rect id="Rectangle_8" data-name="Rectangle 8" width="16.813" height="66.698" transform="translate(73.672 0)" fill="#1c1c1c"/>
<path id="Path_3" data-name="Path 3" d="M262.192,381.415h3.193v-9.083h-6.541Z" transform="translate(-174.901 -314.717)" fill="#3b3b3b"/>
<rect id="Rectangle_9" data-name="Rectangle 9" width="16.813" height="66.698" transform="translate(0 0)" fill="#1c1c1c"/>
<rect id="Rectangle_10" data-name="Rectangle 10" width="76.459" height="61.124" transform="translate(14.026 0)" fill="#3b3b3b"/>
<path id="Path_4" data-name="Path 4" d="M241.847,300.816v16.172H170.934V300.816h70.913m.3-.3h-71.5v16.762h71.5V300.521Z" transform="translate(-154.136 -297.811)" fill="#212121"/>
<path id="Path_5" data-name="Path 5" d="M170.592,381.415H167.4v-9.083h6.541Z" transform="translate(-153.373 -314.717)" fill="#3b3b3b"/>
<path id="Path_6" data-name="Path 6" d="M215.187,310.961a1.691,1.691,0,1,0,1.691-1.69A1.691,1.691,0,0,0,215.187,310.961Z" transform="translate(-164.623 -299.871)" fill="#e7e7e7"/>
<path id="Path_7" data-name="Path 7" d="M241.847,326.283v16.172H170.934V326.283h70.913m.3-.3h-71.5V342.75h71.5V325.988Z" transform="translate(-154.136 -303.807)" fill="#212121"/>
<path id="Path_8" data-name="Path 8" d="M215.187,336.429a1.691,1.691,0,1,0,1.691-1.691A1.691,1.691,0,0,0,215.187,336.429Z" transform="translate(-164.623 -305.867)" fill="#212121"/>
<path id="Path_9" data-name="Path 9" d="M241.847,351.75v16.172H170.934V351.75h70.913m.3-.3h-71.5v16.763h71.5V351.455Z" transform="translate(-154.136 -309.802)" fill="#212121"/>
<path id="Path_10" data-name="Path 10" d="M215.187,361.9a1.691,1.691,0,1,0,1.691-1.691A1.691,1.691,0,0,0,215.187,361.9Z" transform="translate(-164.623 -311.862)" fill="#212121"/>
</g>
<g id="Group_4" data-name="Group 4" transform="translate(40.858 146.312)">
<rect id="Rectangle_11" data-name="Rectangle 11" width="16.813" height="105.433" transform="translate(62.835)" fill="#e1e1e1"/>
<path id="Path_11" data-name="Path 11" d="M152.4,381.415H155.6v-9.083h-6.541Z" transform="translate(-75.948 -275.982)" fill="#3b3b3b"/>
<rect id="Rectangle_12" data-name="Rectangle 12" width="16.813" height="105.433" fill="#1c1c1c"/>
<rect id="Rectangle_13" data-name="Rectangle 13" width="65.622" height="99.859" transform="translate(14.026)" fill="#3b3b3b"/>
<path id="Path_12" data-name="Path 12" d="M135.342,249.907v22.609H75.371V249.907h59.971m.348-.348H75.023v23.305H135.69V249.559Z" transform="translate(-58.52 -247.079)" fill="#212121"/>
<path id="Path_13" data-name="Path 13" d="M145.012,283.071v59.971H116.447V283.071h28.566m.348-.348H116.1V343.39H145.36V282.723Z" transform="translate(-68.19 -254.887)" fill="#212121"/>
<path id="Path_14" data-name="Path 14" d="M103.936,283.071v59.971H75.371V283.071h28.565m.349-.348H75.023V343.39h29.262V282.723Z" transform="translate(-58.52 -254.887)" fill="#212121"/>
<path id="Path_15" data-name="Path 15" d="M74.976,381.415H71.783v-9.083h6.541Z" transform="translate(-57.757 -275.982)" fill="#3b3b3b"/>
<path id="Path_16" data-name="Path 16" d="M112.485,264.279a1.691,1.691,0,1,0,1.69-1.69A1.691,1.691,0,0,0,112.485,264.279Z" transform="translate(-67.339 -250.147)" fill="#212121"/>
<path id="Path_17" data-name="Path 17" d="M120.4,320a1.691,1.691,0,1,0,1.691-1.69A1.691,1.691,0,0,0,120.4,320Z" transform="translate(-69.203 -263.266)" fill="#212121"/>
<path id="Path_18" data-name="Path 18" d="M104.566,320a1.691,1.691,0,1,0,1.691-1.69A1.691,1.691,0,0,0,104.566,320Z" transform="translate(-65.475 -263.266)" fill="#212121"/>
</g>
<path id="Path_19" data-name="Path 19" d="M99.705,207.869H92.612a74.9,74.9,0,0,1,1.232,10.414c0,3.858-5.395,18.982,2.315,18.982s2.314-15.124,2.314-18.982A74.9,74.9,0,0,1,99.705,207.869Z" transform="translate(-21.661 -90.952)" fill="#3b3b3b"/>
<path id="Path_20" data-name="Path 20" d="M66.8,228.148v4.608a9.31,9.31,0,0,0,9.283,9.283h4.608a9.309,9.309,0,0,0,9.282-9.283v-4.608Z" transform="translate(-15.727 -95.726)" fill="#575757"/>
<path id="Path_21" data-name="Path 21" d="M195.667,284.265c0,5.345,5.987,9.719,13.305,9.719h6.605c7.319,0,13.306-4.374,13.306-9.719Z" transform="translate(-46.064 -108.937)" fill="#e1e1e1"/>
<g id="Group_6" data-name="Group 6" transform="translate(278.298 73.586)">
<path id="Path_22" data-name="Path 22" d="M410.335,245.113a69.979,69.979,0,0,0-14.6,17.682,45.65,45.65,0,0,0-6.3,19.256c.019-8.791.047-18.238.077-27.153,1.018-2.295,3.342-7.582,5.01-11.759,5.564-13.939,7.636-17.367,12.64-29.39,6.674-16.036,13.513-35.064,11.555-33.544-3.99,3.1-19.283,31.734-20.936,35.832a114.731,114.731,0,0,0-8.253,34.294c.031-8.374.064-16.062.1-21.995.1-19.351.431-25.6.592-27.521.619-.979,1.349-2.12,1.775-2.735,3.592-5.194,4.977-9.618,8.361-17.364,4.8-10.977,8.927-30.466,7.719-29.483-5.028,4.092-8.994,12.892-14.205,24.1s-3.72,17.66-4.754,27.237c-.218,1.879-.384,8.971-.5,18.8-1.352-10.471-3.887-17.371-8.514-23.642-5.689-7.713-11.193-12.923-15.233-15.643s6.974,16.224,12.24,24.493c4.691,7.364,9.011,13.862,11.447,20.261-.129,13.321-.189,30.188-.19,45.889a92.177,92.177,0,0,0-5.812-20.8c-3.162-7.16-8.027-18.139-11.9-21.864-.93-.895,4.049,20.46,7.245,26.139s5.542,11.031,7.553,14.249c.469.751,2.025,3.647,2.915,5.312.009,19.168.106,36.082.273,41.839h.828c-.056-1.486-.065-11.236-.047-24.142,1.994-7.007,6.554-15,10.318-22.3C403.836,263.208,414.342,241.842,410.335,245.113Z" transform="translate(-363.987 -151.196)" fill="#3b3b3b"/>
<g id="Group_5" data-name="Group 5" transform="translate(8.595 149.48)">
<path id="Path_23" data-name="Path 23" d="M404.5,376.979H380.54l-1.809-23.491h27.582Z" transform="translate(-376.053 -348.3)" fill="#3b3b3b"/>
<path id="Path_24" data-name="Path 24" d="M407.275,354.628H376.12l-.892-7.926h32.939Z" transform="translate(-375.228 -346.702)" fill="#3b3b3b"/>
</g>
</g>
<g id="Group_7" data-name="Group 7" transform="translate(52.15 15.708)">
<rect id="Rectangle_14" data-name="Rectangle 14" width="42.856" height="47.059" fill="#1c1c1c"/>
<rect id="Rectangle_15" data-name="Rectangle 15" width="44.267" height="47.059" transform="translate(3.231)" fill="#3b3b3b"/>
<rect id="Rectangle_16" data-name="Rectangle 16" width="39.642" height="36.85" transform="translate(43.789 3.708) rotate(90)" fill="#212121"/>
<rect id="Rectangle_17" data-name="Rectangle 17" width="20.425" height="18.986" transform="translate(34.857 13.317) rotate(90)" fill="#3b3b3b"/>
</g>
<g id="Group_9" data-name="Group 9" transform="translate(273.705 21.194)">
<g id="Group_8" data-name="Group 8">
<rect id="Rectangle_18" data-name="Rectangle 18" width="39.812" height="43.716" fill="#1c1c1c"/>
<rect id="Rectangle_19" data-name="Rectangle 19" width="41.123" height="43.716" transform="translate(3.001)" fill="#3b3b3b"/>
<rect id="Rectangle_20" data-name="Rectangle 20" width="36.826" height="34.232" transform="translate(40.679 3.445) rotate(90)" fill="#212121"/>
</g>
<circle id="Ellipse_1" data-name="Ellipse 1" cx="10.68" cy="10.68" r="10.68" transform="translate(12.882 11.178)" fill="#3b3b3b"/>
</g>
<g id="Group_11" data-name="Group 11" transform="translate(107.737 43.768)">
<g id="Group_10" data-name="Group 10">
<rect id="Rectangle_21" data-name="Rectangle 21" width="31.792" height="34.91" fill="#1c1c1c"/>
<rect id="Rectangle_22" data-name="Rectangle 22" width="32.839" height="34.91" transform="translate(2.397)" fill="#3b3b3b"/>
<rect id="Rectangle_23" data-name="Rectangle 23" width="29.407" height="27.336" transform="translate(32.484 2.751) rotate(90)" fill="#212121"/>
<path id="Path_25" data-name="Path 25" d="M163.217,125.3l-7.476,12.949h14.952Z" transform="translate(-144.401 -115.282)" fill="#3b3b3b"/>
</g>
</g>
</g>
</g>
<g id="Shadow" transform="translate(42.901 322.527)">
<path id="Path_137" data-name="Path 137" d="M148.244,0c38.971,0,74.431.878,101.045,2.323,28.975,1.573,47.2,3.829,47.2,6.335,0,4.781-66.371,8.658-148.244,8.658S0,13.439,0,8.658,66.371,0,148.244,0Z" fill="#1c1c1c"/>
</g>
<g id="Character_2" data-name="Character 2" transform="translate(219.566 87.53)">
<g id="Group_17" data-name="Group 17">
<path id="Path_26" data-name="Path 26" d="M337.288,162.485,329.7,159.41s-10.008,18.253-12.875,19.173c-3.9,1.254-11.968,4.74-16.762,5.393a8.575,8.575,0,0,0-1.61,4.006c6.432,2.145,20.561-.7,23.585-2.949C328.938,179.912,337.288,162.485,337.288,162.485Z" transform="translate(-289.827 -112.122)" fill="url(#linear-gradient)"/>
<g id="Group_13" data-name="Group 13" transform="translate(33.482 41.989)">
<path id="Path_27" data-name="Path 27" d="M347.277,156.712c1.411,5.229-6.25,15.733-6.25,15.733L330.964,166.8s1.876-4.318,4.173-8.715C338.846,150.983,345.666,150.744,347.277,156.712Z" transform="translate(-330.964 -152.479)" fill="#f8c657"/>
</g>
<path id="Path_29" data-name="Path 29" d="M336.212,171.1l3.952,2.216.691-12.131C338.562,162.948,336.935,168.267,336.212,171.1Z" transform="translate(-298.717 -112.538)" opacity="0.2"/>
<g id="Group_14" data-name="Group 14" transform="translate(38.507 40.493)">
<path id="Path_30" data-name="Path 30" d="M342.22,152.312s-7.813,17.384-3.258,49.757h30.79c.489-4.727-1.129-27.783,4.736-50.053a78.489,78.489,0,0,0-10.231-1.3,113.187,113.187,0,0,0-13.089,0A59.721,59.721,0,0,0,342.22,152.312Z" transform="translate(-337.536 -150.522)" fill="#f8c657"/>
</g>
<path id="Path_32" data-name="Path 32" d="M334.323,416.684c-.048.821,11.625,1.486,26.074,1.486s26.2-.665,26.248-1.486-11.625-1.487-26.074-1.487S334.371,415.863,334.323,416.684Z" transform="translate(-298.272 -172.339)" fill="#e7edf2" style="mix-blend-mode: multiply;isolation: isolate"/>
<rect id="Rectangle_24" data-name="Rectangle 24" width="5.872" height="13.069" transform="translate(51.863 225.819) rotate(-21.073)" fill="url(#linear-gradient)"/>
<path id="Path_33" data-name="Path 33" d="M390.628,405.349h-5.757l-2.112-13.331h5.757Z" transform="translate(-309.675 -166.882)" fill="url(#linear-gradient)"/>
<path id="Path_34" data-name="Path 34" d="M382.189,408.582h6.468a.467.467,0,0,1,.467.393l.836,5.117a.9.9,0,0,1-.9,1.024c-2.256-.039-3.345-.171-6.189-.171-1.749,0-5.365.182-7.781.182-2.363,0-2.592-2.389-1.59-2.606,4.493-.97,6.242-2.308,7.737-3.585A1.475,1.475,0,0,1,382.189,408.582Z" transform="translate(-307.363 -170.781)" fill="silver"/>
<path id="Path_35" data-name="Path 35" d="M356.2,405.391l6.133-1.783a.477.477,0,0,1,.567.239l2.272,4.584a.879.879,0,0,1-.575,1.216c-2.221.606-3.714.986-6.5,1.794-1.921.558-3.876,1.468-5.774,2.073a27.562,27.562,0,0,1-6,.437c-2.363,0-2.89-2.493-1.878-2.606,2.564-.288,2.908-.154,4.323-.864a19.767,19.767,0,0,0,6.175-4.267A2.882,2.882,0,0,1,356.2,405.391Z" transform="translate(-300.542 -169.606)" fill="silver"/>
<path id="Path_36" data-name="Path 36" d="M299.08,190.648l-6.335-2.665L290.137,195a26.107,26.107,0,0,0,7.831,0Z" transform="translate(-287.87 -118.848)" fill="#ff8b7b"/>
<path id="Path_37" data-name="Path 37" d="M287.339,187.758l-.167,4.669,2.267,2.521,2.608-7.017Z" transform="translate(-287.172 -118.795)" fill="#ff8b7b"/>
<g id="Group_15" data-name="Group 15" transform="translate(51.861 223.71)">
<rect id="Rectangle_25" data-name="Rectangle 25" width="5.874" height="6.737" transform="translate(0 2.115) rotate(-21.105)" fill="#ea7064"/>
<path id="Path_38" data-name="Path 38" d="M388.518,392.023h-5.759l1.091,6.871h5.759Z" transform="translate(-361.536 -390.593)" fill="#ea7064"/>
</g>
<path id="Path_39" data-name="Path 39" d="M338.123,199.428c.11,1.383.244,2.8.409,4.25l22.895-7.432a16.4,16.4,0,0,0,8.808-6.387c.086-2.043.2-4.188.377-6.427.079-1.093.173-2.208.275-3.34.11-1.178.235-2.38.377-3.59Z" transform="translate(-299.167 -116.145)" opacity="0.2"/>
<path id="Path_40" data-name="Path 40" d="M347.66,171.578l-.78-.093c.454-3.814,3.3-6.83,6.311-6.759l-.023.786C350.571,165.437,348.068,168.156,347.66,171.578Z" transform="translate(-301.228 -113.373)" fill="#212121"/>
<path id="Path_41" data-name="Path 41" d="M353.188,180.812l-.129,0,.023-.786c2.629.1,5.1-2.644,5.509-6.066l.779.093C358.922,177.811,356.164,180.812,353.188,180.812Z" transform="translate(-302.683 -115.547)" fill="#212121"/>
<path id="Path_42" data-name="Path 42" d="M367.706,131.5c-1.073,4.211-2.349,11.927.433,14.738,0,0-1.943,4.272-9.768,4.272-7.15,0-3.321-4.272-3.321-4.272,4.762-1.121,4.845-4.605,4.219-7.877Z" transform="translate(-302.911 -105.55)" fill="url(#linear-gradient)"/>
<path id="Path_43" data-name="Path 43" d="M365.881,135.158l-4.993,4.058a13.19,13.19,0,0,1,.268,2.324c1.46,1.453,4.389-2.229,4.689-4.107A6.293,6.293,0,0,0,365.881,135.158Z" transform="translate(-304.526 -106.412)" opacity="0.111"/>
<path id="Path_44" data-name="Path 44" d="M349.557,130.242a5.017,5.017,0,0,0,3.243,2.4c1.836.409,2.759-1.28,2.252-2.98-.456-1.529-1.96-3.586-3.8-3.233A2.549,2.549,0,0,0,349.557,130.242Z" transform="translate(-301.776 -104.347)" fill="url(#linear-gradient)"/>
<path id="Path_45" data-name="Path 45" d="M352.832,113.729c-2.859,1.31-3.867,12.671-.272,14.35S358.248,111.248,352.832,113.729Z" transform="translate(-302.022 -101.314)" fill="#212121"/>
<path id="Path_46" data-name="Path 46" d="M367.94,120.629c-.684,5.7-.8,9.058-3.848,11.985a7.35,7.35,0,0,1-12.5-3.9c-.924-5.123.351-13.588,6.065-15.857A7.365,7.365,0,0,1,367.94,120.629Z" transform="translate(-302.273 -101.02)" fill="url(#linear-gradient)"/>
<path id="Path_47" data-name="Path 47" d="M357.208,112.932c4.23-1.082,7.342-1.819,6.231,1.712-1.48,4.7-3.255,9.261-.874,9.472,1.448.129,7.871-2.6,7.056-5.352-.71-2.4,2.275-3.048,2.826-4.272,1.983-4.409-3.682-3.836-2.674-6.5.982-2.6-4.564-6.988-7.637-4.843-4.974,3.472-13.521,3.422-9.027-2.272,3.218-4.078-2.524-3.241-2.524-3.241s3.468,2.057-2.369,5.238C342.027,106.242,347.692,115.367,357.208,112.932Z" transform="translate(-300.934 -97.561)" fill="#212121"/>
<path id="Path_48" data-name="Path 48" d="M374.193,130.242a5.872,5.872,0,0,1-3.526,2.4c-1.883.409-2.608-1.28-1.9-2.98.635-1.529,2.38-3.586,4.183-3.233C374.725,126.775,375.205,128.743,374.193,130.242Z" transform="translate(-306.318 -104.347)" fill="url(#linear-gradient)"/>
<path id="Path_49" data-name="Path 49" d="M337.683,217.94s-5.169,46.255-5.571,63.81c-.419,18.26,17.515,75.23,17.515,75.23l9.183-3.857s-10.693-52.047-9.207-69.98c1.619-19.55,8.319-65.2,8.319-65.2Z" transform="translate(-297.75 -125.901)" fill="#181818"/>
<path id="Path_50" data-name="Path 50" d="M355.547,233.98c-4.117,8.549-1.343,25.449.888,35.467.849-7.072,1.854-14.748,2.813-21.85C359.154,236.676,358.305,228.245,355.547,233.98Z" transform="translate(-302.771 -129.241)" opacity="0.2"/>
<path id="Path_51" data-name="Path 51" d="M363.053,390.826c.043-.018,1.089,2.926,1.089,2.926L353.557,398.2l-1.668-3.1Z" transform="translate(-302.408 -166.601)" fill="silver"/>
<path id="Path_52" data-name="Path 52" d="M353.686,217.94s3.954,43.992,6.574,60.474c2.869,18.048,14.141,78.168,14.141,78.168h10.544s-6.317-58.662-7.51-76.531c-1.3-19.394-3.88-62.11-3.88-62.11Z" transform="translate(-302.831 -125.901)" fill="#181818"/>
<path id="Path_53" data-name="Path 53" d="M391.066,395.542c.045,0,.352,2.947.352,2.947H379.829L379,395.106Z" transform="translate(-308.791 -167.609)" fill="silver"/>
<path id="Path_54" data-name="Path 54" d="M386.279,352.27a.1.1,0,0,1-.1-.087c-.057-.533-5.755-53.5-6.827-69.55-1.163-17.423-3.5-56.053-3.526-56.441a.1.1,0,0,1,.093-.1h.006a.1.1,0,0,1,.1.093c.023.388,2.362,39.018,3.525,56.439,1.071,16.052,6.767,69.01,6.825,69.542a.1.1,0,0,1-.087.108Z" transform="translate(-308.044 -127.819)" opacity="0.2"/>
<path id="Path_55" data-name="Path 55" d="M361.285,125.034c-.027.464-.3.84-.6.84s-.528-.376-.5-.84.3-.841.6-.841S361.313,124.57,361.285,125.034Z" transform="translate(-304.361 -103.831)" fill="#1a2e35"/>
<path id="Path_56" data-name="Path 56" d="M354.421,125.034c-.028.464-.3.84-.6.84s-.528-.376-.5-.84.3-.841.6-.841S354.448,124.57,354.421,125.034Z" transform="translate(-302.744 -103.831)" fill="#1a2e35"/>
<path id="Path_57" data-name="Path 57" d="M356.169,125.595a17.913,17.913,0,0,1-2.451,3.971,2.613,2.613,0,0,0,2.194.416Z" transform="translate(-302.839 -104.161)" opacity="0.111"/>
<path id="Path_58" data-name="Path 58" d="M357.059,133.335a.127.127,0,0,1-.128-.136.147.147,0,0,1,.145-.137,3.933,3.933,0,0,0,3.083-1.438.141.141,0,0,1,.191-.039.132.132,0,0,1,.028.188A4.168,4.168,0,0,1,357.059,133.335Z" transform="translate(-303.595 -105.566)" fill="#1a2e35"/>
<path id="Path_59" data-name="Path 59" d="M362.055,123.165a.271.271,0,0,1-.241-.021,2.153,2.153,0,0,0-1.947-.2.262.262,0,0,1-.356-.128.286.286,0,0,1,.149-.364,2.685,2.685,0,0,1,2.465.229.265.265,0,0,1,.07.375A.3.3,0,0,1,362.055,123.165Z" transform="translate(-304.197 -103.374)" fill="#1a2e35"/>
<path id="Path_60" data-name="Path 60" d="M352.049,121.018a.245.245,0,0,1-.1-.059.271.271,0,0,1,0-.385,2.843,2.843,0,0,1,2.356-.948.254.254,0,0,1,.211.31.291.291,0,0,1-.322.229h0a2.274,2.274,0,0,0-1.859.771A.284.284,0,0,1,352.049,121.018Z" transform="translate(-302.402 -102.753)" fill="#1a2e35"/>
<path id="Path_61" data-name="Path 61" d="M378.683,161.665l-7.954-2.117s-7.8,19.2-10.554,20.45c-3.749,1.706-13.241,7.605-17.274,10.45a7.92,7.92,0,0,0,.46,4.177c6.859-1.246,20.055-6.319,22.807-8.9C372.442,179.848,378.683,161.665,378.683,161.665Z" transform="translate(-300.269 -112.154)" fill="url(#linear-gradient)"/>
<path id="Path_62" data-name="Path 62" d="M382.059,409.448a1.675,1.675,0,0,1-1.091-.293.779.779,0,0,1-.239-.721.465.465,0,0,1,.256-.386c.649-.326,2.445.814,2.648.945a.132.132,0,0,1,.054.138.148.148,0,0,1-.109.11A6.963,6.963,0,0,1,382.059,409.448Zm-.785-1.191a.4.4,0,0,0-.179.034.177.177,0,0,0-.095.16.528.528,0,0,0,.155.5,2.734,2.734,0,0,0,2.038.1A5.184,5.184,0,0,0,381.273,408.257Z" transform="translate(-309.195 -170.642)" fill="#575757"/>
<path id="Path_63" data-name="Path 63" d="M383.93,408.83a.135.135,0,0,1-.064-.016c-.577-.323-1.655-1.585-1.495-2.227a.478.478,0,0,1,.455-.357.712.712,0,0,1,.57.175c.637.547.677,2.208.678,2.278a.145.145,0,0,1-.07.125A.14.14,0,0,1,383.93,408.83Zm-1.025-2.334c-.021,0-.041,0-.063,0-.178.021-.2.1-.207.138-.094.379.583,1.333,1.149,1.782a3.107,3.107,0,0,0-.573-1.8A.454.454,0,0,0,382.906,406.5Z" transform="translate(-309.58 -170.226)" fill="#575757"/>
<path id="Path_64" data-name="Path 64" d="M355.357,408.274a2.179,2.179,0,0,1-1.442-.009.71.71,0,0,1-.372-.584.456.456,0,0,1,.156-.405c.616-.548,3.11.041,3.392.11a.127.127,0,0,1,.1.119.148.148,0,0,1-.086.138A10.409,10.409,0,0,1,355.357,408.274Zm-1.243-.908a.573.573,0,0,0-.242.109.172.172,0,0,0-.058.162.465.465,0,0,0,.242.387,3.783,3.783,0,0,0,2.562-.463A7.405,7.405,0,0,0,354.114,407.366Z" transform="translate(-302.796 -170.42)" fill="#575757"/>
<path id="Path_65" data-name="Path 65" d="M357.428,407.153a.145.145,0,0,1-.057,0c-.741-.137-2.324-1.016-2.338-1.674,0-.154.069-.365.431-.491a.976.976,0,0,1,.788.046c.83.41,1.265,1.878,1.283,1.94a.143.143,0,0,1-.033.134A.146.146,0,0,1,357.428,407.153Zm-1.808-1.931-.08.024c-.237.083-.235.18-.235.213.009.395,1.109,1.121,1.884,1.366a2.952,2.952,0,0,0-1.07-1.542A.713.713,0,0,0,355.62,405.221Z" transform="translate(-303.148 -169.921)" fill="#575757"/>
<path id="Path_66" data-name="Path 66" d="M341.038,199.373l-7.973,3.67-.925,2.249,2.947,1.983s5.5-.6,7.066-4.132Z" transform="translate(-297.758 -121.53)" fill="url(#linear-gradient)"/>
<path id="Path_67" data-name="Path 67" d="M343.766,203.973a11,11,0,0,0-1.482-4.327l1.257-.943a12.126,12.126,0,0,1,1.775,5.008Z" transform="translate(-300.146 -121.372)" fill="#1a2e35"/>
<path id="Path_68" data-name="Path 68" d="M345.115,200.568a1.532,1.532,0,1,1-1.864-.594A1.4,1.4,0,0,1,345.115,200.568Z" transform="translate(-300.137 -121.64)" fill="#1a2e35"/>
<path id="Path_69" data-name="Path 69" d="M326.3,207.136l1.059,1.073,7.154-3.06-2.826-.976Z" transform="translate(-296.384 -122.66)" fill="url(#linear-gradient)"/>
<g id="Group_16" data-name="Group 16" transform="translate(63.049 41.869)">
<path id="Path_72" data-name="Path 72" d="M387.072,157.764c2.1,6.779-6.085,16.041-6.085,16.041l-11.352-4.633a116.455,116.455,0,0,1,4.643-11.525C377.737,150.147,384.949,150.921,387.072,157.764Z" transform="translate(-369.634 -152.322)" fill="#f8c657"/>
</g>
</g>
</g>
<g id="Screen" transform="translate(144.953 66.893)">
<g id="Group_19" data-name="Group 19">
<rect id="Rectangle_26" data-name="Rectangle 26" width="4.884" height="0.786" transform="translate(37.39)" fill="#51ccc7"/>
<rect id="Rectangle_27" data-name="Rectangle 27" width="13.133" height="0.785" transform="translate(104.934 44.287) rotate(-87.421)" fill="#51ccc7"/>
<path id="Path_74" data-name="Path 74" d="M295.247,75.194H205.028l-8.4,187.872h90.219Z" transform="translate(-191.243 -71.658)" fill="#3b3b3b"/>
<path id="Path_75" data-name="Path 75" d="M291.725,78.566h-90.22l-8.4,187.872h90.22Z" transform="translate(-190.414 -72.452)" opacity="0.136"/>
<path id="Path_76" data-name="Path 76" d="M288.2,81.938h-90.22l-8.4,187.872H279.8Z" transform="translate(-189.584 -73.246)" opacity="0.136"/>
<path id="Path_77" data-name="Path 77" d="M281.227,189.106H204.221l-.643,14.379h77.007Z" transform="translate(-192.879 -98.475)" fill="#212121"/>
<path id="Path_78" data-name="Path 78" d="M246.829,175.39H204.943l-.288,6.433h41.886Z" transform="translate(-193.132 -95.246)" fill="#575757"/>
<path id="Path_79" data-name="Path 79" d="M278.959,239.849H201.952l-.643,14.379h77.007Z" transform="translate(-192.345 -110.421)" fill="#212121"/>
<path id="Path_80" data-name="Path 80" d="M268.216,284.036H216.432l-.77,17.233h51.784Z" transform="translate(-195.724 -120.824)" fill="#2cc38c" opacity="0.748"/>
<path id="Path_81" data-name="Path 81" d="M263.9,304.7H212.111a.1.1,0,0,1-.066-.029.089.089,0,0,1-.024-.067l.771-17.233a.091.091,0,0,1,.09-.088h51.784a.092.092,0,0,1,.066.029.087.087,0,0,1,.025.067l-.771,17.233A.091.091,0,0,1,263.9,304.7Zm-51.689-.183h51.6l.762-17.051h-51.6Z" transform="translate(-194.866 -121.589)" fill="#fff"/>
<path id="Path_82" data-name="Path 82" d="M237.245,226.134h-34.57l-.288,6.433h34.57Z" transform="translate(-192.598 -107.192)" fill="#575757"/>
<path id="Path_83" data-name="Path 83" d="M271.04,122.348a20.242,20.242,0,0,1-4.255,11.51,20.565,20.565,0,0,1-16.208,8.077,18.579,18.579,0,0,1-18.7-19.587,20.68,20.68,0,0,1,20.455-19.588A18.568,18.568,0,0,1,271.04,122.348Z" transform="translate(-199.535 -78.148)" fill="#1c1c1c"/>
<path id="Path_85" data-name="Path 85" d="M213.845,197.8a2.433,2.433,0,0,1-2.407,2.3,2.184,2.184,0,0,1-2.2-2.3,2.433,2.433,0,0,1,2.407-2.3A2.184,2.184,0,0,1,213.845,197.8Z" transform="translate(-194.211 -99.98)" fill="#575757"/>
<path id="Path_86" data-name="Path 86" d="M227.333,197.8a2.432,2.432,0,0,1-2.407,2.3,2.183,2.183,0,0,1-2.2-2.3,2.432,2.432,0,0,1,2.407-2.3A2.183,2.183,0,0,1,227.333,197.8Z" transform="translate(-197.386 -99.98)" fill="#575757"/>
<path id="Path_87" data-name="Path 87" d="M240.82,197.8a2.433,2.433,0,0,1-2.407,2.3,2.184,2.184,0,0,1-2.2-2.3,2.433,2.433,0,0,1,2.407-2.3A2.184,2.184,0,0,1,240.82,197.8Z" transform="translate(-200.561 -99.98)" fill="#575757"/>
<path id="Path_88" data-name="Path 88" d="M211.577,248.543a2.433,2.433,0,0,1-2.407,2.3,2.184,2.184,0,0,1-2.2-2.3,2.433,2.433,0,0,1,2.407-2.3A2.184,2.184,0,0,1,211.577,248.543Z" transform="translate(-193.677 -111.926)" fill="#575757"/>
<path id="Path_89" data-name="Path 89" d="M225.064,248.543a2.433,2.433,0,0,1-2.407,2.3,2.185,2.185,0,0,1-2.2-2.3,2.433,2.433,0,0,1,2.407-2.3A2.184,2.184,0,0,1,225.064,248.543Z" transform="translate(-196.852 -111.926)" fill="#575757"/>
<path id="Path_90" data-name="Path 90" d="M238.551,248.543a2.433,2.433,0,0,1-2.407,2.3,2.185,2.185,0,0,1-2.2-2.3,2.433,2.433,0,0,1,2.408-2.3A2.183,2.183,0,0,1,238.551,248.543Z" transform="translate(-200.027 -111.926)" fill="#575757"/>
<path id="Path_91" data-name="Path 91" d="M252.039,248.543a2.433,2.433,0,0,1-2.408,2.3,2.184,2.184,0,0,1-2.2-2.3,2.433,2.433,0,0,1,2.407-2.3A2.184,2.184,0,0,1,252.039,248.543Z" transform="translate(-203.202 -111.926)" fill="#575757"/>
<path id="Path_92" data-name="Path 92" d="M265.526,248.543a2.433,2.433,0,0,1-2.407,2.3,2.184,2.184,0,0,1-2.2-2.3,2.433,2.433,0,0,1,2.407-2.3A2.184,2.184,0,0,1,265.526,248.543Z" transform="translate(-206.377 -111.926)" fill="#575757"/>
<g id="Group_18" data-name="Group 18" transform="translate(35.563 26.45)">
<ellipse id="Ellipse_3" data-name="Ellipse 3" cx="8.101" cy="7.747" rx="8.101" ry="7.747" transform="matrix(0.715, -0.699, 0.699, 0.715, 5.443, 11.327)" fill="#575757"/>
<path id="Path_93" data-name="Path 93" d="M267.784,141.553a20.565,20.565,0,0,1-16.208,8.077,18.577,18.577,0,0,1-15.479-8.077c3.717-3.7,9.6-6.1,16.113-6.1S264.4,137.853,267.784,141.553Z" transform="translate(-236.097 -112.294)" fill="#575757"/>
</g>
</g>
</g>
<g id="Character_1" data-name="Character 1" transform="translate(83.152 133.636)">
<g id="Group_31" data-name="Group 31">
<g id="Group_26" data-name="Group 26" transform="translate(4.054)">
<path id="Path_95" data-name="Path 95" d="M126.558,211.608c-.724,1.588-1.486,3.335-2.155,5.039-.674,1.72-1.347,3.443-1.934,5.188a65.573,65.573,0,0,0-2.733,10.551l-.174,1.126a1.717,1.717,0,0,0,.056.57,5.862,5.862,0,0,0,.84,1.773,22.252,22.252,0,0,0,3.4,3.808,51.851,51.851,0,0,0,4.22,3.529c1.467,1.129,3.015,2.233,4.529,3.268l-1.424,2.684a54.238,54.238,0,0,1-10.307-5.879,24.632,24.632,0,0,1-4.618-4.341,10.857,10.857,0,0,1-1.828-3.267,7.315,7.315,0,0,1-.369-2.252c0-.189.015-.454.028-.581l.037-.38.076-.759a59.5,59.5,0,0,1,2.5-11.727c.6-1.887,1.233-3.755,1.96-5.588s1.473-3.616,2.4-5.473Z" transform="translate(-114.058 -169.878)" fill="url(#linear-gradient)"/>
<path id="Path_96" data-name="Path 96" d="M136.474,256.588l5.4-2.741-1.4,5.939s-3.71,1.036-5.435-.765Z" transform="translate(-118.999 -180.46)" fill="#ff8b7b"/>
<path id="Path_97" data-name="Path 97" d="M148.5,254.822l-1.437,4.908-4.906.055,1.4-5.938Z" transform="translate(-120.672 -180.46)" fill="#ff8b7b"/>
<path id="Path_98" data-name="Path 98" d="M160.432,175a15.252,15.252,0,0,0,1.212,3.023,1.239,1.239,0,0,1-1.212.388Z" transform="translate(-124.975 -161.898)" fill="url(#linear-gradient)"/>
<ellipse id="Ellipse_5" data-name="Ellipse 5" cx="0.573" cy="0.876" rx="0.573" ry="0.876" transform="translate(34.724 11.396)" fill="#1a2e35"/>
<path id="Path_99" data-name="Path 99" d="M160.04,172.7l1.162-.335S160.606,173.273,160.04,172.7Z" transform="translate(-124.883 -161.277)" fill="#1a2e35"/>
<path id="Path_100" data-name="Path 100" d="M140.559,182.336c.7,3.559,1.394,10.081-1.1,12.456,0,0,.973,3.611,7.587,3.611,7.273,0,3.476-3.61,3.476-3.61-3.97-.948-3.867-3.892-3.175-6.659Z" transform="translate(-120.039 -163.625)" fill="url(#linear-gradient)"/>
<path id="Path_101" data-name="Path 101" d="M138.368,169.055c.365,5.942.392,8.465,3.393,11.515,4.514,4.587,11.732,2.84,13.151-3.091,1.276-5.339.465-14.159-5.351-16.524A8.119,8.119,0,0,0,138.368,169.055Z" transform="translate(-119.777 -158.443)" fill="url(#linear-gradient)"/>
<path id="Path_102" data-name="Path 102" d="M137.2,162.863c-2.98,1.086-6.955.278-5.395,9.475,1.652,9.738-.891,12.941-.891,12.941a60.7,60.7,0,0,0,22.855-.144s-3.525-6.165-2.536-10.662c1.262-5.737.262-7.857.262-7.857S141.394,161.335,137.2,162.863Z" transform="translate(-118.027 -158.975)" fill="#212121"/>
<path id="Path_103" data-name="Path 103" d="M155.64,175.28a5.993,5.993,0,0,0,.936,3.188c.806,1.239,1.762.735,2-.552.216-1.158.056-3.2-.976-3.988C156.585,173.148,155.654,173.935,155.64,175.28Z" transform="translate(-123.847 -161.573)" fill="url(#linear-gradient)"/>
<path id="Path_104" data-name="Path 104" d="M135.719,162.792c-.86-2.4,3.226-6.1,11.863-4.565s9.017,8.723,9.017,8.723l-1.748-2.074.078,2.184-8.877,1.707Z" transform="translate(-119.131 -157.863)" fill="#212121"/>
<g id="Group_20" data-name="Group 20" transform="translate(17.303 28.995)">
<path id="Path_105" data-name="Path 105" d="M136.707,198.363h0a1.346,1.346,0,0,1,1.109-1.548c2.69-.444,8.8-1.344,11.881-.918,2.286.317,2.89,1.652,2.987,2.743a1.348,1.348,0,0,1-1.41,1.455l-13.3-.6A1.35,1.35,0,0,1,136.707,198.363Z" transform="translate(-136.689 -195.786)" fill="#27a879"/>
<path id="Path_106" data-name="Path 106" d="M136.707,198.363h0a1.346,1.346,0,0,1,1.109-1.548c2.69-.444,8.8-1.344,11.881-.918,2.286.317,2.89,1.652,2.987,2.743a1.348,1.348,0,0,1-1.41,1.455l-13.3-.6A1.35,1.35,0,0,1,136.707,198.363Z" transform="translate(-136.689 -195.786)" fill="#ce6c6b"/>
</g>
<path id="Path_107" data-name="Path 107" d="M146.76,370.419l4.927,3.421,8.251-11.182-4.927-3.421Z" transform="translate(-121.757 -205.27)" fill="url(#linear-gradient)"/>
<path id="Path_108" data-name="Path 108" d="M131.715,369.925l5.213,2.968,7.3-11.827-5.212-2.968Z" transform="translate(-118.215 -205.003)" fill="url(#linear-gradient)"/>
<g id="Group_21" data-name="Group 21" transform="translate(17.033 153.098)">
<path id="Path_109" data-name="Path 109" d="M161.165,362.66l-4.252,5.765L151.984,365l4.252-5.765Z" transform="translate(-140.02 -358.369)" fill="#ee9ca7"/>
<path id="Path_110" data-name="Path 110" d="M140.1,358.1l5.215,2.97-3.767,6.095-5.215-2.97Z" transform="translate(-136.336 -358.101)" fill="#ee9ca7"/>
</g>
<g id="Group_22" data-name="Group 22" transform="translate(9.903 68.908)">
<path id="Path_111" data-name="Path 111" d="M146.268,247.988s19.252,24.264,15.64,47.467C158.992,314.2,142.1,339.573,142.1,339.573l-7.945-3.948a259.516,259.516,0,0,0,14.3-34.743,25.682,25.682,0,0,0-3.08-22.247c-9.752-14.244-25.376-5.77-14.867-30.647Z" transform="translate(-127.01 -247.988)" fill="#3b3b3b"/>
<path id="Path_112" data-name="Path 112" d="M146.268,247.988s19.252,24.264,15.64,47.467C158.992,314.2,142.1,339.573,142.1,339.573l-7.945-3.948a259.516,259.516,0,0,0,14.3-34.743,25.682,25.682,0,0,0-3.08-22.247c-9.752-14.244-25.376-5.77-14.867-30.647Z" transform="translate(-127.01 -247.988)" opacity="0.6"/>
</g>
<path id="Path_113" data-name="Path 113" d="M163.688,267.524l-2.8-2.781c0,.219,5.421,33.682,6.945,43.087a57.342,57.342,0,0,0,2.051-8.431C171.655,288.038,167.938,276.418,163.688,267.524Z" transform="translate(-125.083 -183.025)" opacity="0.4"/>
<g id="Group_23" data-name="Group 23" transform="translate(15.208 68.908)">
<path id="Path_114" data-name="Path 114" d="M156.5,247.988s23.181,30.491,23.834,48.776c.546,15.321-25.251,44.915-25.251,44.915l-7.489-4.844s15.084-21.04,18.882-38.237c-1.448-17.023-32.527-50.61-32.527-50.61Z" transform="translate(-133.949 -247.988)" fill="#3b3b3b"/>
<path id="Path_115" data-name="Path 115" d="M156.5,247.988s23.181,30.491,23.834,48.776c.546,15.321-25.251,44.915-25.251,44.915l-7.489-4.844s15.084-21.04,18.882-38.237c-1.448-17.023-32.527-50.61-32.527-50.61Z" transform="translate(-133.949 -247.988)" opacity="0.6"/>
</g>
<path id="Path_116" data-name="Path 116" d="M124.438,200.378c-2.483.586-4.855,9.6-4.855,9.6l9.681,6.463s3.227-7.123,2.1-10.243C130.192,202.946,127.573,199.638,124.438,200.378Z" transform="translate(-115.359 -167.848)" fill="#ea7e7d"/>
<path id="Path_117" data-name="Path 117" d="M128.2,207.994l-.676,7.851,3.6,2.412a32.259,32.259,0,0,0,2.192-6.984Z" transform="translate(-117.229 -169.665)" opacity="0.2"/>
<path id="Path_118" data-name="Path 118" d="M157.48,200.1s2.858,1.007-2.866,36.2H130.251c.409-9.915.421-16.029-4.318-36.377a71.957,71.957,0,0,1,10.345-1.363,77.556,77.556,0,0,1,11.063,0C152.092,199,157.48,200.1,157.48,200.1Z" transform="translate(-116.854 -167.398)" fill="#ea7e7d"/>
<path id="Union_1" data-name="Union 1" d="M-92.552-88.615a3.416,3.416,0,0,1-1.614-.486,4.047,4.047,0,0,1-1.39-1.445c-.117-.193-.216-.4-.284-.538l-.146-.3-.29-.593-.579-1.187c-.754-1.591-1.495-3.191-2.2-4.808s-1.371-3.252-2.027-4.894c-.628-1.668-1.249-3.283-1.8-5.057l5.83-1.9c.553,1.525,1.137,3.174,1.744,4.759q.873,2.412,1.813,4.811l1.557,3.99c.251-.519.5-1.056.738-1.6.677-1.524,1.292-3.113,1.919-4.706s1.2-3.218,1.78-4.844l1.68-4.709a3.966,3.966,0,0,1,1.419-2.869l3.054-2.554,5.544.007-.229.832-4.312.724,1.12,1.745-1.565,2.764a6.57,6.57,0,0,1-2.262,1.282c-.545,3.021-1.217,5.995-2,8.979-.439,1.719-.947,3.424-1.527,5.144-.289.861-.613,1.721-.984,2.6A15.968,15.968,0,0,1-89.008-90.7a6.779,6.779,0,0,1-.667.825,4.256,4.256,0,0,1-1.393.984,3.463,3.463,0,0,1-1.355.281Zm-.95-5.08a.573.573,0,0,0,.1-.089C-93.507-93.716-93.508-93.687-93.5-93.695Z" transform="translate(140.149 148.114)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
<path id="Path_120" data-name="Path 120" d="M165,200.566c2.928.7,6.218,9.349,6.218,9.349l-8.7,7.416s-5.64-9.434-4.5-12.549C159.2,201.538,161.171,199.655,165,200.566Z" transform="translate(-124.37 -167.863)" fill="#ea7e7d"/>
<path id="Path_123" data-name="Path 123" d="M159.714,368.477l-8.73-5.648,1.563-2.719,9.812,6.032Z" transform="translate(-122.751 -205.476)" fill="gray"/>
<path id="Path_124" data-name="Path 124" d="M142.3,376.492a5.235,5.235,0,0,1-2.161-.749.141.141,0,0,1-.072-.138.143.143,0,0,1,.1-.122c.235-.074,2.307-.709,2.894-.216a.484.484,0,0,1,.162.461.8.8,0,0,1-.431.662A1.081,1.081,0,0,1,142.3,376.492Zm-1.72-.834c.95.483,1.714.661,2.082.479a.534.534,0,0,0,.278-.447.2.2,0,0,0-.065-.2C142.562,375.226,141.414,375.427,140.576,375.658Z" transform="translate(-120.18 -209.001)" fill="#1a2e35"/>
<path id="Path_125" data-name="Path 125" d="M140.2,375.24a.141.141,0,0,1-.137-.18c.02-.07.5-1.731,1.282-2.109a.74.74,0,0,1,.63-.019.494.494,0,0,1,.352.511c-.054.687-1.454,1.637-2.093,1.793A.164.164,0,0,1,140.2,375.24Zm1.482-2.085a.494.494,0,0,0-.213.052c-.468.226-.861,1.122-1.048,1.667.673-.284,1.591-1.034,1.624-1.453.005-.068-.01-.157-.179-.227A.466.466,0,0,0,141.685,373.155Z" transform="translate(-120.18 -208.48)" fill="#1a2e35"/>
<path id="Path_126" data-name="Path 126" d="M156.419,380.623c-.861,0-2.061-1.106-2.718-1.786a.143.143,0,0,1-.025-.163.154.154,0,0,1,.145-.078c.3.04,2.962.4,3.338,1.15a.46.46,0,0,1-.018.447.788.788,0,0,1-.606.423A.961.961,0,0,1,156.419,380.623Zm-2.215-1.684c.966.939,1.811,1.459,2.3,1.395a.512.512,0,0,0,.394-.281.175.175,0,0,0,.01-.18C156.7,379.464,155.28,379.112,154.2,378.939Z" transform="translate(-123.381 -209.828)" fill="#1a2e35"/>
<path id="Path_127" data-name="Path 127" d="M154.288,378.5a2.89,2.89,0,0,1-.511-.038.142.142,0,0,1-.083-.23c.044-.053,1.078-1.3,2.055-1.386a1.033,1.033,0,0,1,.787.248c.3.258.28.487.21.633C156.5,378.24,155.181,378.5,154.288,378.5Zm-.2-.287c.854.047,2.22-.236,2.4-.609.015-.031.06-.126-.138-.3a.745.745,0,0,0-.577-.18A3.285,3.285,0,0,0,154.091,378.217Z" transform="translate(-123.381 -209.416)" fill="#1a2e35"/>
<path id="Path_128" data-name="Path 128" d="M137.651,374.348l-6.484-1.833a.476.476,0,0,0-.573.265l-2.189,4.922a.964.964,0,0,0,.635,1.288c2.272.6,3.4.775,6.25,1.581,1.755.5,4.266,1.4,6.689,2.088,2.369.67,3.229-1.674,2.282-2.177-4.249-2.252-4.584-3.8-5.746-5.506A1.565,1.565,0,0,0,137.651,374.348Z" transform="translate(-117.418 -208.392)" fill="#e5e5e5"/>
<path id="Path_129" data-name="Path 129" d="M150.843,376.532l-5.536-3.844a.474.474,0,0,0-.627.064l-3.672,3.941a.963.963,0,0,0,.182,1.424c1.953,1.307,2.961,1.84,5.4,3.529,1.5,1.04,4.487,3.347,6.556,4.782,2.023,1.4,3.6-.533,2.866-1.316-3.285-3.512-4.009-5.712-4.552-7.708A1.568,1.568,0,0,0,150.843,376.532Z" transform="translate(-120.347 -208.416)" fill="#e5e5e5"/>
<path id="Path_130" data-name="Path 130" d="M145,366.076l-9.982-4.962,1.033-2.7,10.655,5.223Z" transform="translate(-118.993 -205.077)" fill="gray"/>
<g id="Group_24" data-name="Group 24" transform="translate(12.169 67.295)">
<path id="Path_131" data-name="Path 131" d="M130.838,246.062l-.845,2.181c-.085.17.115.342.4.342h25.3c.219,0,.4-.107.415-.245l.219-2.181c.015-.151-.175-.279-.415-.279h-24.67A.443.443,0,0,0,130.838,246.062Z" transform="translate(-129.973 -245.879)" fill="gray"/>
<path id="Path_132" data-name="Path 132" d="M130.838,246.062l-.845,2.181c-.085.17.115.342.4.342h25.3c.219,0,.4-.107.415-.245l.219-2.181c.015-.151-.175-.279-.415-.279h-24.67A.443.443,0,0,0,130.838,246.062Z" transform="translate(-129.973 -245.879)" fill="gray" opacity="0.4"/>
</g>
<g id="Group_25" data-name="Group 25" transform="translate(16.127 67.102)">
<path id="Path_133" data-name="Path 133" d="M136.035,248.761h-.661c-.132,0-.232-.067-.222-.151l.31-2.833c.009-.083.125-.151.256-.151h.661c.132,0,.232.068.222.151l-.31,2.833C136.282,248.693,136.166,248.761,136.035,248.761Z" transform="translate(-135.151 -245.626)" fill="#3b3b3b"/>
<path id="Path_134" data-name="Path 134" d="M156.442,248.761h-.661c-.132,0-.232-.067-.223-.151l.31-2.833c.009-.083.124-.151.255-.151h.661c.132,0,.232.068.223.151l-.31,2.833C156.689,248.693,156.573,248.761,156.442,248.761Z" transform="translate(-139.955 -245.626)" fill="#3b3b3b"/>
</g>
</g>
<g id="Group_30" data-name="Group 30" transform="translate(0 89.036)">
<g id="Group_27" data-name="Group 27" transform="translate(0 7.61)">
<ellipse id="Ellipse_6" data-name="Ellipse 6" cx="20.484" cy="1.487" rx="20.484" ry="1.487" transform="translate(0 100.108)" fill="#575757" style="mix-blend-mode: multiply;isolation: isolate"/>
<path id="Path_135" data-name="Path 135" d="M143.953,383.764a49.905,49.905,0,0,1-10.081-3.85c-.069-.04-.141-.069-.211-.1V363.426h7.29a2.182,2.182,0,1,0,0-4.364h-7.29V284.267H129.3v74.794h-7.29a2.182,2.182,0,1,0,0,4.364h7.29V379.81c-.07.036-.142.065-.211.1A49.905,49.905,0,0,1,119,383.764a1.07,1.07,0,0,0,.3,2.1h24.35A1.07,1.07,0,0,0,143.953,383.764Z" transform="translate(-110.986 -284.267)" fill="#575757"/>
</g>
<g id="Group_29" data-name="Group 29" transform="translate(2.936)">
<rect id="Rectangle_28" data-name="Rectangle 28" width="35.113" height="16.005" rx="5.18" fill="#212121"/>
<path id="Path_136" data-name="Path 136" d="M117.448,295.247v1.392c0,1.147,1.248,2.085,2.774,2.085h22.145c1.525,0,2.774-.938,2.774-2.085v-1.392Z" transform="translate(-113.737 -279.242)" fill="#1c1c1c"/>
</g>
</g>
</g>
</g>
</g>
</svg>

Binārs
src/assets/fonts/AdobeClean-Bold.ttf Parādīt failu


Binārs
src/assets/fonts/AdobeClean-It.ttf Parādīt failu


Binārs
src/assets/fonts/AdobeClean-Light.ttf Parādīt failu


Binārs
src/assets/fonts/AdobeClean-Regular.ttf Parādīt failu


+ 98
- 1
src/pages/onboarding/Welcome.module.scss Parādīt failu

@@ -1,4 +1,101 @@
.upfold {
background-color: #1b1d1e;
background-color: var(--black);
height: 95vh;
width: 100%;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
position: absolute;
z-index: 1;
box-shadow: 0px 0px 10px 5px rgba(var(--black-rgb), 0.5);
animation: riseup 1s forwards;
display: flex;
align-items: center;
justify-content: center;

figure {
display: block;
width: 100%;
margin: 0;
animation: fadeIn 1s forwards;
animation-delay: 0.5s;
opacity: 0;
transform: translateY(10vh);
}

img {
margin: 0 auto;
width: 90%;
display: block;
}

@keyframes riseup {
from {
height: 95vh;
}
to {
height: 50vh;
}
}
}

.content {
margin-top: 50vh;
height: 50vh;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--black);
padding: 5%;

animation: fadeIn 1s forwards;
animation-delay: 1s;
opacity: 0;
transform: translateY(10vh);

h2 {
font-size: 24px;
font-weight: 700;
}

p {
font-size: 14px;
color: rgba(var(--black-rgb), 0.5);
}

.actionButtonsHolder {
width: 80%;
margin: 0 auto;

.actionButton {
height: 40px;
text-transform: none;
font-size: 16px;
margin: 20px 0;
--border-radius: 30px;
--border-color: var(--teal);
font-weight: 700;

&:nth-child(1) {
--background: var(--teal);
}

&:nth-child(2) {
--color: var(--teal);
}
}
}
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10vh);
}

to {
opacity: 1;
transform: translateY(0vh);
}
}

+ 18
- 2
src/pages/onboarding/Welcome.tsx Parādīt failu

@@ -1,4 +1,4 @@
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import { IonContent, IonPage, IonButton } from '@ionic/react';
import { Component } from 'react';
import styles from './Welcome.module.scss';

@@ -19,7 +19,23 @@ class WelcomePage extends Component<Props, OwnState> {
<IonContent fullscreen>

<section className={styles.upfold}>
<figure>
<img src="assets/images/welcome/upfold.svg" alt="upfold image"/>
</figure>
</section>

<section className={styles.content}>
<div className={styles.container}>
<h2> Let's Get Started </h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati dicta itaque quaerat labore distinctio natus ex nostrum. Ea assumenda numquam temporibus quisquam inventore facilis, fugiat ut distinctio accusamus maxime iure?
</p>

<div className={styles.actionButtonsHolder}>
<IonButton className={styles.actionButton} expand="block"> Create Account </IonButton>
<IonButton className={styles.actionButton} fill="outline" expand="block"> Login </IonButton>
</div>
</div>
</section>
</IonContent>


+ 43
- 0
src/theme/variables.css Parādīt failu

@@ -1,3 +1,40 @@
@font-face {
font-family: "adobe-clean";
src: url('../assets/fonts/AdobeClean-Regular.ttf');
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: "adobe-clean";
src: url('../assets/fonts/AdobeClean-Light.ttf');
font-weight: 300;
font-style: normal;
}

@font-face {
font-family: "adobe-clean";
src: url('../assets/fonts/AdobeClean-Bold.ttf');
font-weight: 700;
font-style: normal;
}

@font-face {
font-family: "adobe-clean";
src: url('../assets/fonts/AdobeClean-It.ttf');
font-weight: 500;
font-style: italic;
}

* {
font-family: "adobe-clean";
font-weight: 500;
letter-spacing: 0.5px;
line-height: 1.5;
margin: 0;
padding: 0;
}

/* Ionic Variables and Theming. For more info, please see:
http://ionicframework.com/docs/theming/ */

@@ -74,6 +111,12 @@ http://ionicframework.com/docs/theming/ */
--ion-color-light-contrast-rgb: 0, 0, 0;
--ion-color-light-shade: #d7d8da;
--ion-color-light-tint: #f5f6f9;


--teal: #58c48d;
--teal-rgb: 88, 196, 141;
--black: #222222;
--black-rgb: 34, 34, 34;
}

@media (prefers-color-scheme: light) {


Rakstīt Priekšskatītījums
Notiek ielāde…
Atcelt
Saglabāt