From c1ec4d79358e6eca5a818533723d29fcbaa6d6e8 Mon Sep 17 00:00:00 2001
From: Nikolay Pachkov <nikolay.pachkov@jetbrains.com>
Date: Fri, 15 Sep 2023 16:44:59 +0200
Subject: [PATCH] KTL-1181 chore: add mascot on 404 page

---
 static/css/com/layout/images/mascot-404.svg   | 219 ++++++++++++++++++
 static/css/com/page-content/page-content.scss |   6 +-
 2 files changed, 222 insertions(+), 3 deletions(-)
 create mode 100644 static/css/com/layout/images/mascot-404.svg

diff --git a/static/css/com/layout/images/mascot-404.svg b/static/css/com/layout/images/mascot-404.svg
new file mode 100644
index 00000000000..5cd694e8965
--- /dev/null
+++ b/static/css/com/layout/images/mascot-404.svg
@@ -0,0 +1,219 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.8.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 355.2 261.5" style="enable-background:new 0 0 355.2 261.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#C4C4C4;}
+	.st1{fill:url(#SVGID_1_);}
+	.st2{fill:url(#SVGID_00000127016265173880119550000000724076802829820349_);}
+	.st3{fill:url(#SVGID_00000119093026589812040530000016394519053244703900_);}
+	.st4{fill:url(#SVGID_00000118362777777385173800000007949944778457408190_);}
+	.st5{fill:url(#SVGID_00000145042559150603681860000012904146806325302706_);}
+	.st6{fill:url(#SVGID_00000088843861376671192650000014658954038631371926_);}
+	.st7{fill:url(#SVGID_00000134230729014953165530000017241433735864466855_);}
+	.st8{fill:url(#SVGID_00000070832782829163523120000001103177333779410609_);}
+	.st9{fill:#FFFFFF;}
+	.st10{fill:#D8D8D8;}
+	.st11{opacity:0.3;}
+	.st12{fill:#8C8C8C;}
+	.st13{fill:#E2E2E2;}
+	.st14{fill:url(#SVGID_00000123430234698668125110000008185397737153805445_);}
+	.st15{fill:url(#SVGID_00000141429319157652222780000011125252321767813771_);}
+</style>
+<g>
+	<path class="st0" d="M40.1,153.9c0,0,10-14.7,25.5-22.7c14.4-7.5,30.5-5.4,41.1-13.7c20.2-15.9,22.8-28.9,22.8-28.9L89.4,33.7
+		c0,0-7.5,21.5-23.2,29.3C53.7,69.1,39.1,68,25,75.6C9.7,83.8,0,99,0,99L40.1,153.9z"/>
+	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="259.0445" y1="275.8164" x2="326.4554" y2="166.3831">
+		<stop  offset="0.312" style="stop-color:#C4C4C4"/>
+		<stop  offset="0.3708" style="stop-color:#B7B7B7;stop-opacity:0.9488"/>
+		<stop  offset="0.5458" style="stop-color:#969696;stop-opacity:0.7961"/>
+		<stop  offset="0.7133" style="stop-color:#7E7E7E;stop-opacity:0.65"/>
+		<stop  offset="0.8687" style="stop-color:#707070;stop-opacity:0.5145"/>
+		<stop  offset="1" style="stop-color:#6B6B6B;stop-opacity:0.4"/>
+	</linearGradient>
+	<polygon class="st1" points="355.2,214.2 277.6,258.9 245.5,203.4 323.1,158.6 	"/>
+	
+		<linearGradient id="SVGID_00000147935944695265089240000005040501928947907745_" gradientUnits="userSpaceOnUse" x1="31.4379" y1="168.5865" x2="112.7723" y2="285.8731">
+		<stop  offset="0.312" style="stop-color:#C4C4C4"/>
+		<stop  offset="0.3708" style="stop-color:#B7B7B7;stop-opacity:0.9488"/>
+		<stop  offset="0.5458" style="stop-color:#969696;stop-opacity:0.7961"/>
+		<stop  offset="0.7133" style="stop-color:#7E7E7E;stop-opacity:0.65"/>
+		<stop  offset="0.8687" style="stop-color:#707070;stop-opacity:0.5145"/>
+		<stop  offset="1" style="stop-color:#6B6B6B;stop-opacity:0.4"/>
+	</linearGradient>
+	<polygon style="fill:url(#SVGID_00000147935944695265089240000005040501928947907745_);" points="110,218.1 25,232.3 0,187 
+		26.4,182.6 85,172.7 	"/>
+	<g>
+		
+			<linearGradient id="SVGID_00000101824791929439713060000003531813980108203425_" gradientUnits="userSpaceOnUse" x1="102.7365" y1="67.3241" x2="13.9913" y2="136.3481">
+			<stop  offset="0.1528" style="stop-color:#C4C4C4"/>
+			<stop  offset="0.342" style="stop-color:#6B6B6B;stop-opacity:0.4"/>
+			<stop  offset="0.3557" style="stop-color:#7A7A7A;stop-opacity:0.4359"/>
+			<stop  offset="0.3869" style="stop-color:#959595;stop-opacity:0.5174"/>
+			<stop  offset="0.4209" style="stop-color:#AAAAAA;stop-opacity:0.6064"/>
+			<stop  offset="0.4587" style="stop-color:#B9B9B9;stop-opacity:0.7052"/>
+			<stop  offset="0.5032" style="stop-color:#C1C1C1;stop-opacity:0.8217"/>
+			<stop  offset="0.5714" style="stop-color:#C4C4C4"/>
+		</linearGradient>
+		<path style="fill:url(#SVGID_00000101824791929439713060000003531813980108203425_);" d="M40.1,153.9c0,0,10-14.7,25.5-22.7
+			c14.4-7.5,30.5-5.4,41.1-13.7c20.2-15.9,22.8-28.9,22.8-28.9L89.4,33.7c0,0-7.5,21.5-23.2,29.3C53.7,69.1,39.1,68,25,75.6
+			C9.7,83.8,0,99,0,99L40.1,153.9z"/>
+	</g>
+	<g>
+		
+			<linearGradient id="SVGID_00000039114706415061978530000007761416116817142455_" gradientUnits="userSpaceOnUse" x1="-5011.8896" y1="252.2927" x2="-5011.8896" y2="146.7337" gradientTransform="matrix(-1 0 0 1 -4813.5654 0)">
+			<stop  offset="0.3158" style="stop-color:#7F52FF"/>
+			<stop  offset="0.5199" style="stop-color:#7C4FFC"/>
+			<stop  offset="0.6872" style="stop-color:#7247F2"/>
+			<stop  offset="0.8415" style="stop-color:#6139E0"/>
+			<stop  offset="0.9871" style="stop-color:#4926C9"/>
+			<stop  offset="1" style="stop-color:#4724C6"/>
+		</linearGradient>
+		<path style="fill:url(#SVGID_00000039114706415061978530000007761416116817142455_);" d="M211.7,261.5c6.4,0,11.6-5.2,11.7-11.6
+			c0.1-6.5-5.1-11.7-11.6-11.8l-5.9-0.1c0.3-1.4,0.7-2.7,1-4c7.9-31.3,16.9-66.7-13.1-100.3c-4.3-4.8-11.7-5.2-16.5-0.9
+			c-4.8,4.3-5.2,11.7-0.9,16.5c21.7,24.3,15.3,49.6,7.9,79c-1.6,6.1-3.2,12.5-4.5,18.9c-0.7,3.4,0.1,7,2.3,9.7
+			c2.2,2.7,5.5,4.3,9,4.4l20.5,0.2C211.6,261.5,211.6,261.5,211.7,261.5z"/>
+	</g>
+	<g>
+		
+			<linearGradient id="SVGID_00000082340405703734207570000000804376882702522284_" gradientUnits="userSpaceOnUse" x1="-4964.7266" y1="232.7212" x2="-4964.7266" y2="153.0638" gradientTransform="matrix(-1 0 0 1 -4813.5654 0)">
+			<stop  offset="0.5767" style="stop-color:#7F52FF"/>
+			<stop  offset="1" style="stop-color:#4724C6"/>
+		</linearGradient>
+		<path style="fill:url(#SVGID_00000082340405703734207570000000804376882702522284_);" d="M157.8,261.5c6.4,0,11.6-5.2,11.7-11.6
+			c0.1-6.5-5.1-11.7-11.6-11.8l-2,0c17-34.2,31.5-76.2,12.2-105.1c-3.6-5.4-10.8-6.8-16.2-3.3c-5.4,3.6-6.8,10.8-3.3,16.2
+			c11.5,17.3,4,50.3-22.3,98c-2,3.6-1.9,8,0.1,11.5c2.1,3.6,5.9,5.7,10,5.8l21.2,0.2C157.8,261.5,157.8,261.5,157.8,261.5z"/>
+	</g>
+	<g>
+		<g>
+			
+				<linearGradient id="SVGID_00000026150815805216787790000009724548987523338115_" gradientUnits="userSpaceOnUse" x1="21.2692" y1="84.9925" x2="119.4166" y2="84.9925">
+				<stop  offset="0.5767" style="stop-color:#7F52FF"/>
+				<stop  offset="1" style="stop-color:#4724C6"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000026150815805216787790000009724548987523338115_);" d="M107.7,127.4c-1.6,0-3.2-0.3-4.8-1
+				c-1-0.5-25.8-11.8-40.1-43.5c-3.7-8.3-9.6-13.6-17.5-15.8c-5.7-1.6-10.5-1-10.6-1c-6.4,1-12.4-3.3-13.4-9.7
+				C20.4,50,24.8,44,31.1,43c12.7-2,40.1,1.8,53,30.3c4.4,9.7,10.4,18,18.1,24.6c5.8,5,10.3,7.2,10.4,7.2c5.9,2.6,8.5,9.5,5.9,15.4
+				C116.5,124.8,112.2,127.4,107.7,127.4z"/>
+		</g>
+		<g>
+			
+				<linearGradient id="SVGID_00000085235707796469008110000003865732176341553801_" gradientUnits="userSpaceOnUse" x1="34.2162" y1="521.0145" x2="-50.355" y2="551.7247" gradientTransform="matrix(0.985 -0.1726 0.1726 0.985 208.5684 -409.9326)">
+				<stop  offset="0.5767" style="stop-color:#7F52FF"/>
+				<stop  offset="1" style="stop-color:#4724C6"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000085235707796469008110000003865732176341553801_);" d="M265.3,155c-5.5,0.4-10.6-3-12.2-8.5
+				c-1.7-6.2,1.9-12.7,8.1-14.4c0.7-0.2,18.9-5.8,32.6-27.3c11.5-18,28-23.6,41.3-24.1c8-0.3,13.9,7.4,11.5,15.1v0
+				c-1.5,4.7-5.8,8.1-10.7,8.2c-6.5,0.2-15.6,2.7-22.4,13.4c-18.7,29.2-44.9,36.8-46,37.2C266.7,154.8,266,154.9,265.3,155z"/>
+		</g>
+		<g>
+			<g>
+				
+					<linearGradient id="SVGID_00000055699488050613961070000015174867522107571643_" gradientUnits="userSpaceOnUse" x1="174.5708" y1="105.2515" x2="260.9491" y2="27.3646">
+					<stop  offset="0" style="stop-color:#7F52FF"/>
+					<stop  offset="0.4561" style="stop-color:#7D50FD"/>
+					<stop  offset="0.6512" style="stop-color:#764BF6"/>
+					<stop  offset="0.7964" style="stop-color:#6A40E9"/>
+					<stop  offset="0.9161" style="stop-color:#5832D8"/>
+					<stop  offset="1" style="stop-color:#4724C6"/>
+				</linearGradient>
+				<path style="fill:url(#SVGID_00000055699488050613961070000015174867522107571643_);" d="M244.2,174.4l-133-24.2
+					c-10.4-1.9-17.2-11.8-15.3-22.2L115,22.9c3.1-16.8,24-23,35.7-10.4l41.5,44.6c2.4,2.5,6.1,3.2,9.2,1.7l54.4-27.1
+					c15.3-7.6,32.8,5.5,29.7,22.3l-19.1,105.1C264.5,169.5,254.5,176.3,244.2,174.4z"/>
+			</g>
+			<g>
+				<g>
+					<g>
+						<path d="M121.7,138l114.6,21.7c8,1.5,15.6-3.8,17.1-11.8l9.7-53.7c1.5-8-3.8-15.6-11.8-17.1L136.7,55.4
+							c-8-1.5-15.6,3.8-17.1,11.8l-9.7,53.7C108.5,128.9,113.8,136.6,121.7,138z"/>
+					</g>
+				</g>
+				<g>
+					<g>
+						<path class="st9" d="M219,93.8c1.1,0,2.3,0.1,3.4,0.3c9.2,1.7,15.4,10.6,13.7,19.8c-1.4,7.9-8.3,13.8-16.4,14
+							c-1.1,0-2.3-0.1-3.4-0.3c-4.5-0.8-8.4-3.3-11-7.1c-2.6-3.7-3.6-8.3-2.8-12.7C204,99.8,210.9,93.9,219,93.8 M218.8,84.3
+							c-12.3,0.2-23.2,9.1-25.5,21.8c-2.6,14.4,6.9,28.2,21.3,30.8c1.8,0.3,3.5,0.5,5.3,0.4c12.3-0.2,23.2-9.1,25.5-21.8
+							c2.6-14.4-6.9-28.2-21.3-30.8C222.3,84.4,220.5,84.3,218.8,84.3L218.8,84.3z"/>
+					</g>
+					<g>
+						<path class="st9" d="M157.5,82.7L157.5,82.7c1.1,0,2.3,0.1,3.4,0.3c9.2,1.7,15.4,10.6,13.7,19.8c-1.4,7.9-8.3,13.8-16.4,14
+							c-1.1,0-2.3-0.1-3.4-0.3c-4.5-0.8-8.4-3.3-11-7.1c-2.6-3.7-3.6-8.3-2.8-12.7C142.6,88.7,149.5,82.8,157.5,82.7 M157.3,73.2
+							c-12.3,0.2-23.2,9.1-25.5,21.8c-2.6,14.4,6.9,28.2,21.3,30.8c1.8,0.3,3.5,0.5,5.3,0.4c12.3-0.2,23.2-9.1,25.5-21.8
+							c2.6-14.4-6.9-28.2-21.3-30.8C160.8,73.3,159.1,73.2,157.3,73.2L157.3,73.2z"/>
+					</g>
+				</g>
+			</g>
+		</g>
+	</g>
+	<path class="st10" d="M223.3,24.5c0,0,21.4-4.6,33.2,11.6c11.8,16.2,17.7,34.7,42.7,35.3l54.3-21.2c0,0-26-6.4-40.8-36.1
+		c-8.2-16.4-24-15.2-30.7-12.6L223.3,24.5z"/>
+	<g class="st11">
+		<g>
+			<path class="st12" d="M94.5,211.3c-0.5,0-1.1-0.3-1.3-0.8l-15-29.5c-0.4-0.7-0.1-1.6,0.7-2c0.7-0.4,1.6-0.1,2,0.7l15,29.5
+				c0.4,0.7,0.1,1.6-0.7,2C94.9,211.2,94.7,211.3,94.5,211.3z"/>
+		</g>
+		<g>
+			<path class="st12" d="M84.5,212.8c-0.5,0-1.1-0.3-1.3-0.8l-15-29.5c-0.4-0.7-0.1-1.6,0.7-2c0.7-0.4,1.6-0.1,2,0.7l15,29.5
+				c0.4,0.7,0.1,1.6-0.7,2C85,212.8,84.7,212.8,84.5,212.8z"/>
+		</g>
+		<g>
+			<path class="st12" d="M74.2,214.6c-0.5,0-1.1-0.3-1.3-0.8l-15-29.5c-0.4-0.7-0.1-1.6,0.7-2c0.7-0.4,1.6-0.1,2,0.7l15,29.5
+				c0.4,0.7,0.1,1.6-0.7,2C74.7,214.5,74.5,214.6,74.2,214.6z"/>
+		</g>
+	</g>
+	<path class="st13" d="M326.4,246.8c0,0-13.9-11.1-31.1-14.2c-16-2.9-30.7,3.8-43.3-1c-24-9.3-30.3-21-30.3-21l22.2-64.2
+		c0,0,13.5,18.4,30.8,21.1c13.7,2.2,27.3-3.1,43.1,0c17,3.3,30.7,15,30.7,15L326.4,246.8z"/>
+	<path class="st13" d="M161.8,210.6c0,0-16.6-2.8-31.9,10.1s-28.5,22.8-53,17.4l-47.7-33.6c0,0,29.7,7.8,55.9-12.6
+		c12.9-10.1,28.4-15.4,34.3-11.2L161.8,210.6z"/>
+	
+		<linearGradient id="SVGID_00000124880864638424635450000005416435536009572777_" gradientUnits="userSpaceOnUse" x1="214.1582" y1="161.755" x2="243.069" y2="167.9906">
+		<stop  offset="0" style="stop-color:#7F52FF"/>
+		<stop  offset="0.4561" style="stop-color:#7D50FD"/>
+		<stop  offset="0.6512" style="stop-color:#764BF6"/>
+		<stop  offset="0.7964" style="stop-color:#6A40E9"/>
+		<stop  offset="0.9161" style="stop-color:#5832D8"/>
+		<stop  offset="1" style="stop-color:#4724C6"/>
+	</linearGradient>
+	<polygon style="fill:url(#SVGID_00000124880864638424635450000005416435536009572777_);" points="239.2,160 217.6,156.2 
+		216.3,169.4 234.8,172.7 	"/>
+	
+		<linearGradient id="SVGID_00000026882719541233535210000008541562331978929325_" gradientUnits="userSpaceOnUse" x1="151.4674" y1="227.203" x2="144.3418" y2="211.0084">
+		<stop  offset="0.3158" style="stop-color:#7F52FF"/>
+		<stop  offset="0.5199" style="stop-color:#7C4FFC"/>
+		<stop  offset="0.6872" style="stop-color:#7247F2"/>
+		<stop  offset="0.8415" style="stop-color:#6139E0"/>
+		<stop  offset="0.9871" style="stop-color:#4926C9"/>
+		<stop  offset="1" style="stop-color:#4724C6"/>
+	</linearGradient>
+	<path style="fill:url(#SVGID_00000026882719541233535210000008541562331978929325_);" d="M161.8,210.6l-8.1,27.5l-19.3-9.5
+		l8.1-15.3C142.5,213.2,154.7,209.1,161.8,210.6z"/>
+	<g class="st11">
+		<g>
+			<path class="st12" d="M257.1,23.3c-0.6,0-1.2-0.4-1.4-0.9c-0.3-0.8,0.1-1.6,0.8-2l34.6-14.1c0.8-0.3,1.6,0.1,2,0.8
+				c0.3,0.8-0.1,1.6-0.8,2l-34.6,14.1C257.5,23.3,257.3,23.3,257.1,23.3z"/>
+		</g>
+		<g>
+			<path class="st12" d="M265.8,30.4c-0.6,0-1.2-0.4-1.4-0.9c-0.3-0.8,0.1-1.6,0.8-2l34.6-14.1c0.8-0.3,1.6,0.1,2,0.8
+				c0.3,0.8-0.1,1.6-0.8,2l-34.6,14.1C266.1,30.3,265.9,30.4,265.8,30.4z"/>
+		</g>
+		<g>
+			<path class="st12" d="M272.2,40.2c-0.6,0-1.2-0.4-1.4-0.9c-0.3-0.8,0.1-1.6,0.8-2l34.6-14.1c0.8-0.3,1.6,0.1,2,0.8
+				c0.3,0.8-0.1,1.6-0.8,2l-34.6,14.1C272.6,40.2,272.4,40.2,272.2,40.2z"/>
+		</g>
+	</g>
+	<g class="st11">
+		<path class="st12" d="M252.3,209.4l-2.6,8.5l-4.8-1.5l-8.5-10.4l1.1-3.7l9.2,11.2l1,0.3l1.6-5.4l-4.4-1.3l1-3.3l11.1,3.4l-1,3.3
+			L252.3,209.4z"/>
+		<path class="st12" d="M252.9,201.3l-8.3-2.5c-3.5-1.1-5-4.1-3.9-7.9c1.1-3.8,4.1-5.4,7.6-4.4l8.3,2.5c3.5,1.1,5,4.1,3.9,7.9
+			C259.4,200.7,256.4,202.4,252.9,201.3z M255.7,192.2l-8.3-2.5c-1.7-0.5-3.3,0.3-3.8,2.1c-0.6,1.9,0.2,3.4,2,3.9l8.3,2.5
+			c1.7,0.5,3.3-0.3,3.8-2.1C258.2,194.2,257.4,192.7,255.7,192.2z M250,195.6c-1.1-0.3-1.4-1.2-1.1-2.2c0.3-1.1,1.1-1.6,2.1-1.3
+			c1.1,0.3,1.5,1.2,1.1,2.3C251.9,195.5,251.1,196,250,195.6z"/>
+		<path class="st12" d="M261.9,177.6l-2.6,8.5l-4.8-1.5l-8.5-10.4l1.1-3.7l9.2,11.2l1,0.3l1.6-5.4l-4.4-1.3l1-3.3l11.1,3.4l-1,3.3
+			L261.9,177.6z"/>
+	</g>
+	<g>
+		<path class="st9" d="M191.1,133.3c-0.1,0-0.3,0-0.4,0l-13.4-2.7c-1.1-0.2-1.8-1.3-1.6-2.4c0.2-1.1,1.3-1.8,2.4-1.6l13.4,2.7
+			c1.1,0.2,1.8,1.3,1.6,2.4C192.9,132.6,192,133.3,191.1,133.3z"/>
+	</g>
+</g>
+</svg>
diff --git a/static/css/com/page-content/page-content.scss b/static/css/com/page-content/page-content.scss
index 40db5d44c99..f7925c37ce7 100644
--- a/static/css/com/page-content/page-content.scss
+++ b/static/css/com/page-content/page-content.scss
@@ -100,8 +100,8 @@
     }
 
     ._error-404 {
-        width: 250px;
-        height: 250px;
-        background-image: url("../layout/images/icon_404.svg");
+        width: 355px;
+        height: 262px;
+        background-image: url("../layout/images/mascot-404.svg");
     }
 }