arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-30 19:57:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: landing page (#611)

Browse Source 
Co-authored-by: Sébastien Chopin <seb@nuxt.com>
This commit is contained in:
Benjamin Canac
2023-09-07 12:34:55 +02:00
parent 190378aaa9
commit 9f9d8f5cec
58 changed files with 3366 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
docs/public/illustrations/color-palette-dark.svg Normal file
View File

@@ -0,0 +1,79 @@
<svg width="363" height="152" viewBox="0 0 363 152" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M358 0C360.209 0 362 1.79086 362 4V13.8182L324 13.8182V4C324 1.79086 325.791 0 328 0L358 0Z" fill="#F8FAFC"/>
<rect x="362" y="13.8182" width="13.8182" height="38" transform="rotate(90 362 13.8182)" fill="#F1F5F9"/>
<rect x="362" y="27.6364" width="13.8182" height="38" transform="rotate(90 362 27.6364)" fill="#E2E8F0"/>
<rect x="362" y="41.4546" width="13.8182" height="38" transform="rotate(90 362 41.4546)" fill="#CBD5E1"/>
<rect x="362" y="55.2727" width="13.8182" height="38" transform="rotate(90 362 55.2727)" fill="#94A3B8"/>
<rect x="362" y="69.0909" width="13.8182" height="38" transform="rotate(90 362 69.0909)" fill="#64748B"/>
<rect x="362" y="82.9091" width="13.8182" height="38" transform="rotate(90 362 82.9091)" fill="#475569"/>
<rect x="362" y="96.7273" width="13.8182" height="38" transform="rotate(90 362 96.7273)" fill="#334155"/>
<rect x="362" y="110.545" width="13.8182" height="38" transform="rotate(90 362 110.545)" fill="#1E293B"/>
<rect x="362" y="124.364" width="13.8182" height="38" transform="rotate(90 362 124.364)" fill="#0F172A"/>
<path d="M362 138.182V148C362 150.209 360.209 152 358 152H328C325.791 152 324 150.209 324 148V138.182H362Z" fill="#020420"/>
<path d="M304 0C306.209 0 308 1.79086 308 4V13.8182L270 13.8182V4C270 1.79086 271.791 0 274 0L304 0Z" fill="#EEF2FF"/>
<rect x="308" y="13.8182" width="13.8182" height="38" transform="rotate(90 308 13.8182)" fill="#E0E7FF"/>
<rect x="308" y="27.6364" width="13.8182" height="38" transform="rotate(90 308 27.6364)" fill="#C7D2FE"/>
<rect x="308" y="41.4546" width="13.8182" height="38" transform="rotate(90 308 41.4546)" fill="#A5B4FC"/>
<rect x="308" y="55.2727" width="13.8182" height="38" transform="rotate(90 308 55.2727)" fill="#818CF8"/>
<rect x="308" y="69.0909" width="13.8182" height="38" transform="rotate(90 308 69.0909)" fill="#6366F1"/>
<rect x="308" y="82.9091" width="13.8182" height="38" transform="rotate(90 308 82.9091)" fill="#4F46E5"/>
<rect x="308" y="96.7273" width="13.8182" height="38" transform="rotate(90 308 96.7273)" fill="#4338CA"/>
<rect x="308" y="110.545" width="13.8182" height="38" transform="rotate(90 308 110.545)" fill="#3730A3"/>
<rect x="308" y="124.364" width="13.8182" height="38" transform="rotate(90 308 124.364)" fill="#312E81"/>
<path d="M308 138.182V148C308 150.209 306.209 152 304 152H274C271.791 152 270 150.209 270 148V138.182H308Z" fill="#1E1B4B"/>
<path d="M250 0C252.209 0 254 1.79086 254 4V13.8182L216 13.8182V4C216 1.79086 217.791 0 220 0L250 0Z" fill="#F5F3FF"/>
<rect x="254" y="13.8182" width="13.8182" height="38" transform="rotate(90 254 13.8182)" fill="#EDE9FE"/>
<rect x="254" y="27.6364" width="13.8182" height="38" transform="rotate(90 254 27.6364)" fill="#DDD6FE"/>
<rect x="254" y="41.4546" width="13.8182" height="38" transform="rotate(90 254 41.4546)" fill="#C4B5FD"/>
<rect x="254" y="55.2727" width="13.8182" height="38" transform="rotate(90 254 55.2727)" fill="#A78BFA"/>
<rect x="254" y="69.0909" width="13.8182" height="38" transform="rotate(90 254 69.0909)" fill="#8B5CF6"/>
<rect x="254" y="82.9091" width="13.8182" height="38" transform="rotate(90 254 82.9091)" fill="#7C3AED"/>
<rect x="254" y="96.7273" width="13.8182" height="38" transform="rotate(90 254 96.7273)" fill="#6D28D9"/>
<rect x="254" y="110.545" width="13.8182" height="38" transform="rotate(90 254 110.545)" fill="#5B21B6"/>
<rect x="254" y="124.364" width="13.8182" height="38" transform="rotate(90 254 124.364)" fill="#4C1D95"/>
<path d="M254 138.182V148C254 150.209 252.209 152 250 152H220C217.791 152 216 150.209 216 148V138.182H254Z" fill="#2E1065"/>
<path d="M34 0C36.2091 0 38 1.79086 38 4V13.8182L0 13.8182V4C0 1.79086 1.79086 0 4 0L34 0Z" fill="#FFF1F2"/>
<rect x="38" y="13.8182" width="13.8182" height="38" transform="rotate(90 38 13.8182)" fill="#FFE4E6"/>
<rect x="38" y="27.6364" width="13.8182" height="38" transform="rotate(90 38 27.6364)" fill="#FECDD3"/>
<rect x="38" y="41.4546" width="13.8182" height="38" transform="rotate(90 38 41.4546)" fill="#FDA4AF"/>
<rect x="38" y="55.2727" width="13.8182" height="38" transform="rotate(90 38 55.2727)" fill="#FB7185"/>
<rect x="38" y="69.0909" width="13.8182" height="38" transform="rotate(90 38 69.0909)" fill="#F43F5E"/>
<rect x="38" y="82.9091" width="13.8182" height="38" transform="rotate(90 38 82.9091)" fill="#E11D48"/>
<rect x="38" y="96.7273" width="13.8182" height="38" transform="rotate(90 38 96.7273)" fill="#BE123C"/>
<rect x="38" y="110.545" width="13.8182" height="38" transform="rotate(90 38 110.545)" fill="#9F1239"/>
<rect x="38" y="124.364" width="13.8182" height="38" transform="rotate(90 38 124.364)" fill="#881337"/>
<path d="M38 138.182V148C38 150.209 36.2091 152 34 152H4C1.79086 152 0 150.209 0 148V138.182H38Z" fill="#4C0519"/>
<path d="M88 0C90.2091 0 92 1.79086 92 4V13.8182L54 13.8182V4C54 1.79086 55.7909 0 58 0L88 0Z" fill="#F0F9FF"/>
<rect x="92" y="13.8182" width="13.8182" height="38" transform="rotate(90 92 13.8182)" fill="#E0F2FE"/>
<rect x="92" y="27.6364" width="13.8182" height="38" transform="rotate(90 92 27.6364)" fill="#BAE6FD"/>
<rect x="92" y="41.4546" width="13.8182" height="38" transform="rotate(90 92 41.4546)" fill="#7DD3FC"/>
<rect x="92" y="55.2727" width="13.8182" height="38" transform="rotate(90 92 55.2727)" fill="#38BDF8"/>
<rect x="92" y="69.0909" width="13.8182" height="38" transform="rotate(90 92 69.0909)" fill="#0EA5E9"/>
<rect x="92" y="82.9091" width="13.8182" height="38" transform="rotate(90 92 82.9091)" fill="#0284C7"/>
<rect x="92" y="96.7273" width="13.8182" height="38" transform="rotate(90 92 96.7273)" fill="#0369A1"/>
<rect x="92" y="110.545" width="13.8182" height="38" transform="rotate(90 92 110.545)" fill="#075985"/>
<rect x="92" y="124.364" width="13.8182" height="38" transform="rotate(90 92 124.364)" fill="#0C4A6E"/>
<path d="M92 138.182V148C92 150.209 90.2091 152 88 152H58C55.7909 152 54 150.209 54 148V138.182H92Z" fill="#082F49"/>
<path d="M142 0C144.209 0 146 1.79086 146 4V13.8182L108 13.8182V4C108 1.79086 109.791 0 112 0L142 0Z" fill="#F0FDFA"/>
<rect x="146" y="13.8182" width="13.8182" height="38" transform="rotate(90 146 13.8182)" fill="#CCFBF1"/>
<rect x="146" y="27.6364" width="13.8182" height="38" transform="rotate(90 146 27.6364)" fill="#99F6E4"/>
<rect x="146" y="41.4546" width="13.8182" height="38" transform="rotate(90 146 41.4546)" fill="#5EEAD4"/>
<rect x="146" y="55.2727" width="13.8182" height="38" transform="rotate(90 146 55.2727)" fill="#2DD4BF"/>
<rect x="146" y="69.0909" width="13.8182" height="38" transform="rotate(90 146 69.0909)" fill="#14B8A6"/>
<rect x="146" y="82.9091" width="13.8182" height="38" transform="rotate(90 146 82.9091)" fill="#0D9488"/>
<rect x="146" y="96.7273" width="13.8182" height="38" transform="rotate(90 146 96.7273)" fill="#0F766E"/>
<rect x="146" y="110.545" width="13.8182" height="38" transform="rotate(90 146 110.545)" fill="#115E59"/>
<rect x="146" y="124.364" width="13.8182" height="38" transform="rotate(90 146 124.364)" fill="#134E4A"/>
<path d="M146 138.182V148C146 150.209 144.209 152 142 152H112C109.791 152 108 150.209 108 148V138.182H146Z" fill="#042F2E"/>
<path d="M196 0C198.209 0 200 1.79086 200 4V13.8182L162 13.8182V4C162 1.79086 163.791 0 166 0L196 0Z" fill="#F0FDF4"/>
<rect x="200" y="13.8182" width="13.8182" height="38" transform="rotate(90 200 13.8182)" fill="#DCFCE7"/>
<rect x="200" y="27.6364" width="13.8182" height="38" transform="rotate(90 200 27.6364)" fill="#BBF7D0"/>
<rect x="200" y="41.4546" width="13.8182" height="38" transform="rotate(90 200 41.4546)" fill="#86EFAC"/>
<rect x="200" y="55.2727" width="13.8182" height="38" transform="rotate(90 200 55.2727)" fill="#4ADE80"/>
<rect x="200" y="69.0909" width="13.8182" height="38" transform="rotate(90 200 69.0909)" fill="#22C55E"/>
<rect x="200" y="82.9091" width="13.8182" height="38" transform="rotate(90 200 82.9091)" fill="#16A34A"/>
<rect x="200" y="96.7273" width="13.8182" height="38" transform="rotate(90 200 96.7273)" fill="#15803D"/>
<rect x="200" y="110.545" width="13.8182" height="38" transform="rotate(90 200 110.545)" fill="#166534"/>
<rect x="200" y="124.364" width="13.8182" height="38" transform="rotate(90 200 124.364)" fill="#14532D"/>
<path d="M200 138.182V148C200 150.209 198.209 152 196 152H166C163.791 152 162 150.209 162 148V138.182H200Z" fill="#052E16"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

79
docs/public/illustrations/color-palette-light.svg Normal file
View File

@@ -0,0 +1,79 @@
<svg width="363" height="152" viewBox="0 0 363 152" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M358 0C360.209 0 362 1.79086 362 4V13.8182L324 13.8182V4C324 1.79086 325.791 0 328 0L358 0Z" fill="#F8FAFC"/>
<rect x="362" y="13.8182" width="13.8182" height="38" transform="rotate(90 362 13.8182)" fill="#F1F5F9"/>
<rect x="362" y="27.6364" width="13.8182" height="38" transform="rotate(90 362 27.6364)" fill="#E2E8F0"/>
<rect x="362" y="41.4545" width="13.8182" height="38" transform="rotate(90 362 41.4545)" fill="#CBD5E1"/>
<rect x="362" y="55.2727" width="13.8182" height="38" transform="rotate(90 362 55.2727)" fill="#94A3B8"/>
<rect x="362" y="69.0909" width="13.8182" height="38" transform="rotate(90 362 69.0909)" fill="#64748B"/>
<rect x="362" y="82.9091" width="13.8182" height="38" transform="rotate(90 362 82.9091)" fill="#475569"/>
<rect x="362" y="96.7273" width="13.8182" height="38" transform="rotate(90 362 96.7273)" fill="#334155"/>
<rect x="362" y="110.545" width="13.8182" height="38" transform="rotate(90 362 110.545)" fill="#1E293B"/>
<rect x="362" y="124.364" width="13.8182" height="38" transform="rotate(90 362 124.364)" fill="#0F172A"/>
<path d="M362 138.182V148C362 150.209 360.209 152 358 152H328C325.791 152 324 150.209 324 148V138.182H362Z" fill="#020420"/>
<path d="M304 0C306.209 0 308 1.79086 308 4V13.8182L270 13.8182V4C270 1.79086 271.791 0 274 0L304 0Z" fill="#EEF2FF"/>
<rect x="308" y="13.8182" width="13.8182" height="38" transform="rotate(90 308 13.8182)" fill="#E0E7FF"/>
<rect x="308" y="27.6364" width="13.8182" height="38" transform="rotate(90 308 27.6364)" fill="#C7D2FE"/>
<rect x="308" y="41.4545" width="13.8182" height="38" transform="rotate(90 308 41.4545)" fill="#A5B4FC"/>
<rect x="308" y="55.2727" width="13.8182" height="38" transform="rotate(90 308 55.2727)" fill="#818CF8"/>
<rect x="308" y="69.0909" width="13.8182" height="38" transform="rotate(90 308 69.0909)" fill="#6366F1"/>
<rect x="308" y="82.9091" width="13.8182" height="38" transform="rotate(90 308 82.9091)" fill="#4F46E5"/>
<rect x="308" y="96.7273" width="13.8182" height="38" transform="rotate(90 308 96.7273)" fill="#4338CA"/>
<rect x="308" y="110.545" width="13.8182" height="38" transform="rotate(90 308 110.545)" fill="#3730A3"/>
<rect x="308" y="124.364" width="13.8182" height="38" transform="rotate(90 308 124.364)" fill="#312E81"/>
<path d="M308 138.182V148C308 150.209 306.209 152 304 152H274C271.791 152 270 150.209 270 148V138.182H308Z" fill="#1E1B4B"/>
<path d="M250 0C252.209 0 254 1.79086 254 4V13.8182L216 13.8182V4C216 1.79086 217.791 0 220 0L250 0Z" fill="#F5F3FF"/>
<rect x="254" y="13.8182" width="13.8182" height="38" transform="rotate(90 254 13.8182)" fill="#EDE9FE"/>
<rect x="254" y="27.6364" width="13.8182" height="38" transform="rotate(90 254 27.6364)" fill="#DDD6FE"/>
<rect x="254" y="41.4545" width="13.8182" height="38" transform="rotate(90 254 41.4545)" fill="#C4B5FD"/>
<rect x="254" y="55.2727" width="13.8182" height="38" transform="rotate(90 254 55.2727)" fill="#A78BFA"/>
<rect x="254" y="69.0909" width="13.8182" height="38" transform="rotate(90 254 69.0909)" fill="#8B5CF6"/>
<rect x="254" y="82.9091" width="13.8182" height="38" transform="rotate(90 254 82.9091)" fill="#7C3AED"/>
<rect x="254" y="96.7273" width="13.8182" height="38" transform="rotate(90 254 96.7273)" fill="#6D28D9"/>
<rect x="254" y="110.545" width="13.8182" height="38" transform="rotate(90 254 110.545)" fill="#5B21B6"/>
<rect x="254" y="124.364" width="13.8182" height="38" transform="rotate(90 254 124.364)" fill="#4C1D95"/>
<path d="M254 138.182V148C254 150.209 252.209 152 250 152H220C217.791 152 216 150.209 216 148V138.182H254Z" fill="#2E1065"/>
<path d="M34 0C36.2091 0 38 1.79086 38 4V13.8182L0 13.8182V4C0 1.79086 1.79086 0 4 0L34 0Z" fill="#FFF1F2"/>
<rect x="38" y="13.8182" width="13.8182" height="38" transform="rotate(90 38 13.8182)" fill="#FFE4E6"/>
<rect x="38" y="27.6364" width="13.8182" height="38" transform="rotate(90 38 27.6364)" fill="#FECDD3"/>
<rect x="38" y="41.4545" width="13.8182" height="38" transform="rotate(90 38 41.4545)" fill="#FDA4AF"/>
<rect x="38" y="55.2727" width="13.8182" height="38" transform="rotate(90 38 55.2727)" fill="#FB7185"/>
<rect x="38" y="69.0909" width="13.8182" height="38" transform="rotate(90 38 69.0909)" fill="#F43F5E"/>
<rect x="38" y="82.9091" width="13.8182" height="38" transform="rotate(90 38 82.9091)" fill="#E11D48"/>
<rect x="38" y="96.7273" width="13.8182" height="38" transform="rotate(90 38 96.7273)" fill="#BE123C"/>
<rect x="38" y="110.545" width="13.8182" height="38" transform="rotate(90 38 110.545)" fill="#9F1239"/>
<rect x="38" y="124.364" width="13.8182" height="38" transform="rotate(90 38 124.364)" fill="#881337"/>
<path d="M38 138.182V148C38 150.209 36.2091 152 34 152H4C1.79086 152 0 150.209 0 148V138.182H38Z" fill="#4C0519"/>
<path d="M88 0C90.2091 0 92 1.79086 92 4V13.8182L54 13.8182V4C54 1.79086 55.7909 0 58 0L88 0Z" fill="#F0F9FF"/>
<rect x="92" y="13.8182" width="13.8182" height="38" transform="rotate(90 92 13.8182)" fill="#E0F2FE"/>
<rect x="92" y="27.6364" width="13.8182" height="38" transform="rotate(90 92 27.6364)" fill="#BAE6FD"/>
<rect x="92" y="41.4545" width="13.8182" height="38" transform="rotate(90 92 41.4545)" fill="#7DD3FC"/>
<rect x="92" y="55.2727" width="13.8182" height="38" transform="rotate(90 92 55.2727)" fill="#38BDF8"/>
<rect x="92" y="69.0909" width="13.8182" height="38" transform="rotate(90 92 69.0909)" fill="#0EA5E9"/>
<rect x="92" y="82.9091" width="13.8182" height="38" transform="rotate(90 92 82.9091)" fill="#0284C7"/>
<rect x="92" y="96.7273" width="13.8182" height="38" transform="rotate(90 92 96.7273)" fill="#0369A1"/>
<rect x="92" y="110.545" width="13.8182" height="38" transform="rotate(90 92 110.545)" fill="#075985"/>
<rect x="92" y="124.364" width="13.8182" height="38" transform="rotate(90 92 124.364)" fill="#0C4A6E"/>
<path d="M92 138.182V148C92 150.209 90.2091 152 88 152H58C55.7909 152 54 150.209 54 148V138.182H92Z" fill="#082F49"/>
<path d="M142 0C144.209 0 146 1.79086 146 4V13.8182L108 13.8182V4C108 1.79086 109.791 0 112 0L142 0Z" fill="#F0FDFA"/>
<rect x="146" y="13.8182" width="13.8182" height="38" transform="rotate(90 146 13.8182)" fill="#CCFBF1"/>
<rect x="146" y="27.6364" width="13.8182" height="38" transform="rotate(90 146 27.6364)" fill="#99F6E4"/>
<rect x="146" y="41.4545" width="13.8182" height="38" transform="rotate(90 146 41.4545)" fill="#5EEAD4"/>
<rect x="146" y="55.2727" width="13.8182" height="38" transform="rotate(90 146 55.2727)" fill="#2DD4BF"/>
<rect x="146" y="69.0909" width="13.8182" height="38" transform="rotate(90 146 69.0909)" fill="#14B8A6"/>
<rect x="146" y="82.9091" width="13.8182" height="38" transform="rotate(90 146 82.9091)" fill="#0D9488"/>
<rect x="146" y="96.7273" width="13.8182" height="38" transform="rotate(90 146 96.7273)" fill="#0F766E"/>
<rect x="146" y="110.545" width="13.8182" height="38" transform="rotate(90 146 110.545)" fill="#115E59"/>
<rect x="146" y="124.364" width="13.8182" height="38" transform="rotate(90 146 124.364)" fill="#134E4A"/>
<path d="M146 138.182V148C146 150.209 144.209 152 142 152H112C109.791 152 108 150.209 108 148V138.182H146Z" fill="#042F2E"/>
<path d="M196 0C198.209 0 200 1.79086 200 4V13.8182L162 13.8182V4C162 1.79086 163.791 0 166 0L196 0Z" fill="#F0FDF4"/>
<rect x="200" y="13.8182" width="13.8182" height="38" transform="rotate(90 200 13.8182)" fill="#DCFCE7"/>
<rect x="200" y="27.6364" width="13.8182" height="38" transform="rotate(90 200 27.6364)" fill="#BBF7D0"/>
<rect x="200" y="41.4545" width="13.8182" height="38" transform="rotate(90 200 41.4545)" fill="#86EFAC"/>
<rect x="200" y="55.2727" width="13.8182" height="38" transform="rotate(90 200 55.2727)" fill="#4ADE80"/>
<rect x="200" y="69.0909" width="13.8182" height="38" transform="rotate(90 200 69.0909)" fill="#22C55E"/>
<rect x="200" y="82.9091" width="13.8182" height="38" transform="rotate(90 200 82.9091)" fill="#16A34A"/>
<rect x="200" y="96.7273" width="13.8182" height="38" transform="rotate(90 200 96.7273)" fill="#15803D"/>
<rect x="200" y="110.545" width="13.8182" height="38" transform="rotate(90 200 110.545)" fill="#166534"/>
<rect x="200" y="124.364" width="13.8182" height="38" transform="rotate(90 200 124.364)" fill="#14532D"/>
<path d="M200 138.182V148C200 150.209 198.209 152 196 152H166C163.791 152 162 150.209 162 148V138.182H200Z" fill="#052E16"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

26
docs/public/illustrations/dark-mode-dark.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

21
docs/public/illustrations/dark-mode-light.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 127 KiB

95
docs/public/illustrations/data-dark.svg Normal file
View File

@@ -0,0 +1,95 @@
<svg width="329" height="173" viewBox="0 0 329 173" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_993_2410)">
<rect x="0.5" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_2410)" fill-opacity="0.5" stroke="url(#paint1_linear_993_2410)"/>
<rect x="36" y="24" width="256" height="118" rx="3" fill="url(#paint2_linear_993_2410)" fill-opacity="0.26"/>
<g clip-path="url(#clip1_993_2410)">
<line x1="45" y1="35" x2="46" y2="35" stroke="#475569" stroke-opacity="0.4" stroke-width="6" stroke-linecap="round"/>
<line x1="61" y1="35" x2="85" y2="35" stroke="#475569" stroke-opacity="0.4" stroke-width="6" stroke-linecap="round"/>
<line x1="120.5" y1="35" x2="151.5" y2="35" stroke="#475569" stroke-opacity="0.4" stroke-width="6" stroke-linecap="round"/>
<line x1="179" y1="35" x2="202" y2="35" stroke="#475569" stroke-opacity="0.4" stroke-width="6" stroke-linecap="round"/>
<line x1="240.5" y1="35" x2="263.5" y2="35" stroke="#475569" stroke-opacity="0.4" stroke-width="6" stroke-linecap="round"/>
</g>
<path d="M37 25H291H37ZM291 46.5H37V45.5H291V46.5ZM37 46V25V46ZM291 25V46V25Z" fill="#475569" fill-opacity="0.3" mask="url(#path-4-inside-1_993_2410)"/>
<g clip-path="url(#clip2_993_2410)">
<line x1="44" y1="55" x2="45" y2="55" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
<line x1="61" y1="55" x2="83" y2="55" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
<line x1="120.5" y1="55" x2="142.5" y2="55" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
<line x1="178" y1="55" x2="205" y2="55" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
<line x1="239.5" y1="55" x2="253.5" y2="55" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
</g>
<path d="M291 63.7H37V64.3H291V63.7Z" fill="#475569" fill-opacity="0.3" mask="url(#path-11-inside-2_993_2410)"/>
<g clip-path="url(#clip3_993_2410)">
<line x1="44" y1="74" x2="45" y2="74" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
<line x1="61" y1="74" x2="91" y2="74" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
<line x1="120.5" y1="74" x2="135.5" y2="74" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
<line x1="178" y1="74" x2="191" y2="74" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
<line x1="239.5" y1="74" x2="261.5" y2="74" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
</g>
<path d="M291 82.7H37V83.3H291V82.7Z" fill="#475569" fill-opacity="0.3" mask="url(#path-18-inside-3_993_2410)"/>
<g clip-path="url(#clip4_993_2410)">
<line x1="44" y1="93" x2="45" y2="93" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
<line x1="61" y1="93" x2="73" y2="93" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
<line x1="120.5" y1="93" x2="142.5" y2="93" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
<line x1="178" y1="93" x2="200" y2="93" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
<line x1="239.5" y1="93" x2="275.5" y2="93" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
</g>
<path d="M291 101.7H37V102.3H291V101.7Z" fill="#475569" fill-opacity="0.3" mask="url(#path-25-inside-4_993_2410)"/>
<g opacity="0.59">
<g clip-path="url(#clip5_993_2410)">
<line x1="44" y1="112" x2="45" y2="112" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
<line x1="61" y1="112" x2="76" y2="112" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
<line x1="120.5" y1="112" x2="142.5" y2="112" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
<line x1="178" y1="112" x2="211" y2="112" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
<line x1="239.5" y1="112" x2="261.5" y2="112" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
</g>
<path d="M291 120.7H37V121.3H291V120.7Z" fill="#475569" fill-opacity="0.3" mask="url(#path-32-inside-5_993_2410)"/>
</g>
<g opacity="0.35" clip-path="url(#clip6_993_2410)">
<line x1="44" y1="131" x2="45" y2="131" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
<line x1="61" y1="131" x2="83" y2="131" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
<line x1="120.5" y1="131" x2="134.5" y2="131" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
<line x1="178" y1="131" x2="200" y2="131" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
<line x1="239.5" y1="131" x2="272.5" y2="131" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
</g>
<rect x="36.5" y="24.5" width="255" height="117" rx="2.5" stroke="url(#paint3_linear_993_2410)" stroke-opacity="0.1"/>
</g>
<defs>
<linearGradient id="paint0_linear_993_2410" x1="164.5" y1="0" x2="164.5" y2="78.7086" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_993_2410" x1="164.5" y1="-1.02658e-07" x2="164.52" y2="117.577" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear_993_2410" x1="164" y1="24" x2="164" y2="142" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint3_linear_993_2410" x1="164" y1="24" x2="164" y2="142" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip0_993_2410">
<rect width="329" height="173" fill="white"/>
</clipPath>
<clipPath id="clip1_993_2410">
<path d="M37 27C37 25.8954 37.8954 25 39 25H289C290.105 25 291 25.8954 291 27V46H37V27Z" fill="white"/>
</clipPath>
<clipPath id="clip2_993_2410">
<path d="M37 47H291V64H37V47Z" fill="white"/>
</clipPath>
<clipPath id="clip3_993_2410">
<path d="M37 66H291V83H37V66Z" fill="white"/>
</clipPath>
<clipPath id="clip4_993_2410">
<path d="M37 85H291V102H37V85Z" fill="white"/>
</clipPath>
<clipPath id="clip5_993_2410">
<path d="M37 104H291V121H37V104Z" fill="white"/>
</clipPath>
<clipPath id="clip6_993_2410">
<rect width="254" height="17" fill="white" transform="translate(37 123)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

90
docs/public/illustrations/data-light.svg Normal file
View File

@@ -0,0 +1,90 @@
<svg width="329" height="173" viewBox="0 0 329 173" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_993_2931)">
<rect x="0.5" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_2931)" fill-opacity="0.15" stroke="url(#paint1_linear_993_2931)"/>
<g clip-path="url(#clip1_993_2931)">
<line x1="45" y1="35" x2="46" y2="35" stroke="#CBD5E1" stroke-opacity="0.55" stroke-width="6" stroke-linecap="round"/>
<line x1="61" y1="35" x2="85" y2="35" stroke="#CBD5E1" stroke-opacity="0.55" stroke-width="6" stroke-linecap="round"/>
<line x1="120.5" y1="35" x2="151.5" y2="35" stroke="#CBD5E1" stroke-opacity="0.55" stroke-width="6" stroke-linecap="round"/>
<line x1="179" y1="35" x2="202" y2="35" stroke="#CBD5E1" stroke-opacity="0.55" stroke-width="6" stroke-linecap="round"/>
<line x1="240.5" y1="35" x2="263.5" y2="35" stroke="#CBD5E1" stroke-opacity="0.55" stroke-width="6" stroke-linecap="round"/>
</g>
<path d="M37 25H291H37ZM291 46.5H37V45.5H291V46.5ZM37 46V25V46ZM291 25V46V25Z" fill="#CBD5E1" fill-opacity="0.5" mask="url(#path-5-inside-1_993_2931)"/>
<g clip-path="url(#clip2_993_2931)">
<line x1="44" y1="55" x2="45" y2="55" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
<line x1="61" y1="55" x2="83" y2="55" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
<line x1="120.5" y1="55" x2="142.5" y2="55" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
<line x1="178" y1="55" x2="205" y2="55" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
<line x1="239.5" y1="55" x2="253.5" y2="55" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
</g>
<path d="M291 63.7H37V64.3H291V63.7Z" fill="#CBD5E1" fill-opacity="0.5" mask="url(#path-12-inside-2_993_2931)"/>
<g clip-path="url(#clip3_993_2931)">
<line x1="44" y1="74" x2="45" y2="74" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
<line x1="61" y1="74" x2="91" y2="74" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
<line x1="120.5" y1="74" x2="135.5" y2="74" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
<line x1="178" y1="74" x2="191" y2="74" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
<line x1="239.5" y1="74" x2="261.5" y2="74" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
</g>
<path d="M291 82.7H37V83.3H291V82.7Z" fill="#CBD5E1" fill-opacity="0.5" mask="url(#path-19-inside-3_993_2931)"/>
<g clip-path="url(#clip4_993_2931)">
<line x1="44" y1="93" x2="45" y2="93" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
<line x1="61" y1="93" x2="73" y2="93" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
<line x1="120.5" y1="93" x2="142.5" y2="93" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
<line x1="178" y1="93" x2="200" y2="93" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
<line x1="239.5" y1="93" x2="275.5" y2="93" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
</g>
<path d="M291 101.7H37V102.3H291V101.7Z" fill="#CBD5E1" fill-opacity="0.5" mask="url(#path-26-inside-4_993_2931)"/>
<g opacity="0.59">
<g clip-path="url(#clip5_993_2931)">
<line x1="44" y1="112" x2="45" y2="112" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
<line x1="61" y1="112" x2="76" y2="112" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
<line x1="120.5" y1="112" x2="142.5" y2="112" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
<line x1="178" y1="112" x2="211" y2="112" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
<line x1="239.5" y1="112" x2="261.5" y2="112" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
</g>
<path d="M291 120.7H37V121.3H291V120.7Z" fill="#CBD5E1" fill-opacity="0.5" mask="url(#path-33-inside-5_993_2931)"/>
</g>
<g opacity="0.35" clip-path="url(#clip6_993_2931)">
<line x1="44" y1="131" x2="45" y2="131" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
<line x1="61" y1="131" x2="83" y2="131" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
<line x1="120.5" y1="131" x2="134.5" y2="131" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
<line x1="178" y1="131" x2="200" y2="131" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
<line x1="239.5" y1="131" x2="272.5" y2="131" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
</g>
<rect x="36.5" y="24.5" width="255" height="117" rx="2.5" stroke="url(#paint2_linear_993_2931)" stroke-opacity="0.7"/>
</g>
<defs>
<linearGradient id="paint0_linear_993_2931" x1="164.5" y1="0" x2="164.5" y2="78.7086" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_993_2931" x1="164.5" y1="-1.02658e-07" x2="164.52" y2="117.577" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear_993_2931" x1="164" y1="24" x2="164" y2="142" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip0_993_2931">
<rect width="329" height="173" fill="white"/>
</clipPath>
<clipPath id="clip1_993_2931">
<path d="M37 27C37 25.8954 37.8954 25 39 25H289C290.105 25 291 25.8954 291 27V46H37V27Z" fill="white"/>
</clipPath>
<clipPath id="clip2_993_2931">
<path d="M37 47H291V64H37V47Z" fill="white"/>
</clipPath>
<clipPath id="clip3_993_2931">
<path d="M37 66H291V83H37V66Z" fill="white"/>
</clipPath>
<clipPath id="clip4_993_2931">
<path d="M37 85H291V102H37V85Z" fill="white"/>
</clipPath>
<clipPath id="clip5_993_2931">
<path d="M37 104H291V121H37V104Z" fill="white"/>
</clipPath>
<clipPath id="clip6_993_2931">
<rect width="254" height="17" fill="white" transform="translate(37 123)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

66
docs/public/illustrations/elements-dark.svg Normal file
View File

@@ -0,0 +1,66 @@
<svg width="329" height="173" viewBox="0 0 329 173" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_993_2342)">
<rect x="0.5" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_2342)" fill-opacity="0.5" stroke="url(#paint1_linear_993_2342)"/>
<rect x="111.597" y="24" width="55" height="18" rx="3" fill="#475569" fill-opacity="0.32"/>
<line x1="119.597" y1="33" x2="139.597" y2="33" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
<path d="M158.194 32.398L158.195 32.3982C158.212 32.4153 158.226 32.4356 158.235 32.4579C158.244 32.4802 158.249 32.5042 158.249 32.5284C158.249 32.5526 158.244 32.5766 158.235 32.5989C158.226 32.6212 158.212 32.6414 158.195 32.6584C158.195 32.6585 158.195 32.6585 158.195 32.6586L156.229 34.6016L156.229 34.6015L156.227 34.6035C156.21 34.6207 156.19 34.6343 156.167 34.6436L156.273 34.8975L156.167 34.6436C156.145 34.6529 156.121 34.6577 156.097 34.6577C156.073 34.6577 156.049 34.6529 156.026 34.6436L155.92 34.8975L156.026 34.6436C156.004 34.6343 155.984 34.6207 155.967 34.6035L155.967 34.6035L155.966 34.6027L154.022 32.6594L154.022 32.6594L154.022 32.6586C154.004 32.6415 153.991 32.6212 153.981 32.5989C153.972 32.5766 153.967 32.5526 153.967 32.5284C153.967 32.5042 153.972 32.4802 153.981 32.4579C153.991 32.4356 154.004 32.4153 154.022 32.3982L154.022 32.398C154.056 32.3639 154.103 32.3447 154.151 32.3447C154.199 32.3447 154.246 32.3638 154.28 32.3978C154.28 32.3979 154.28 32.3979 154.28 32.398L155.902 34.0199L156.095 34.213L156.29 34.0213L157.935 32.3988L157.936 32.398C157.97 32.3639 158.017 32.3447 158.065 32.3447C158.114 32.3447 158.16 32.3639 158.194 32.398Z" stroke="#475569" stroke-opacity="0.32" stroke-width="0.55"/>
<g clip-path="url(#clip1_993_2342)">
<rect x="111.597" y="47.0852" width="106.418" height="126.663" rx="3" fill="url(#paint2_linear_993_2342)" fill-opacity="0.32"/>
<ellipse cx="122.306" cy="58.5852" rx="4.5669" ry="4.56691" fill="#475569" fill-opacity="0.3"/>
<line x1="134.806" y1="59.0852" x2="154.806" y2="59.0852" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
<rect x="111.597" y="70.0852" width="106.418" height="0.55426" fill="#475569" fill-opacity="0.23"/>
<path d="M120.25 82.9019L120.818 81.4824C120.909 81.2561 121.044 81.0505 121.217 80.8781L124.33 77.7647C124.703 77.3919 125.308 77.3919 125.68 77.7647C126.053 78.1375 126.053 78.7419 125.68 79.1147L122.567 82.2281C122.394 82.4005 122.189 82.5361 121.962 82.6266L120.543 83.1944C120.359 83.2679 120.177 83.0856 120.25 82.9019Z" fill="#475569" fill-opacity="0.32"/>
<path d="M119.381 79.2269C119.381 78.9162 119.632 78.6644 119.943 78.6644H122.306C122.492 78.6644 122.643 78.5133 122.643 78.3269C122.643 78.1405 122.492 77.9894 122.306 77.9894H119.943C119.26 77.9894 118.706 78.5434 118.706 79.2269V83.5019C118.706 84.1853 119.26 84.7394 119.943 84.7394H124.218C124.902 84.7394 125.456 84.1853 125.456 83.5019V81.1394C125.456 80.953 125.304 80.8019 125.118 80.8019C124.932 80.8019 124.781 80.953 124.781 81.1394V83.5019C124.781 83.8125 124.529 84.0644 124.218 84.0644H119.943C119.632 84.0644 119.381 83.8125 119.381 83.5019V79.2269Z" fill="#475569" fill-opacity="0.32"/>
<line x1="134.806" y1="81.6394" x2="154.806" y2="81.6394" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
<rect x="199.806" y="76.6394" width="9" height="9" rx="2" fill="#475569" fill-opacity="0.3"/>
<path d="M120.956 96.2144C120.956 95.8416 121.258 95.5394 121.631 95.5394H123.376C123.555 95.5394 123.727 95.6105 123.853 95.7371L125.258 97.1417C125.385 97.2683 125.456 97.44 125.456 97.619V100.264C125.456 100.637 125.154 100.939 124.781 100.939H124.331V99.419C124.331 99.061 124.189 98.7176 123.935 98.4644L122.531 97.0598C122.278 96.8067 121.934 96.6644 121.576 96.6644H120.956V96.2144Z" fill="#475569" fill-opacity="0.32"/>
<path d="M119.831 97.3394C119.458 97.3394 119.156 97.6416 119.156 98.0144V102.064C119.156 102.437 119.458 102.739 119.831 102.739H122.981C123.354 102.739 123.656 102.437 123.656 102.064V99.419C123.656 99.24 123.585 99.0683 123.458 98.9417L122.053 97.5371C121.927 97.4105 121.755 97.3394 121.576 97.3394H119.831Z" fill="#475569" fill-opacity="0.32"/>
<line x1="134.806" y1="99.6394" x2="164.806" y2="99.6394" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
<rect x="199.806" y="94.6394" width="9" height="9" rx="2" fill="#475569" fill-opacity="0.3"/>
<rect x="111.597" y="110.639" width="106.418" height="0.55426" fill="#475569" fill-opacity="0.23"/>
<g clip-path="url(#clip2_993_2342)">
<path d="M118.706 118.544C118.457 118.544 118.256 118.745 118.256 118.994V119.444C118.256 119.692 118.457 119.894 118.706 119.894H125.906C126.154 119.894 126.356 119.692 126.356 119.444V118.994C126.356 118.745 126.154 118.544 125.906 118.544H118.706Z" fill="#475569" fill-opacity="0.32"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M118.706 120.569H125.906L125.541 124.038C125.492 124.496 125.106 124.844 124.646 124.844H119.966C119.506 124.844 119.119 124.496 119.071 124.038L118.706 120.569ZM120.956 122.144C120.956 121.895 121.157 121.694 121.406 121.694H123.206C123.454 121.694 123.656 121.895 123.656 122.144C123.656 122.392 123.454 122.594 123.206 122.594H121.406C121.157 122.594 120.956 122.392 120.956 122.144Z" fill="#475569" fill-opacity="0.32"/>
</g>
<line x1="134.806" y1="122.194" x2="156.806" y2="122.194" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
<g opacity="0.36">
<path fill-rule="evenodd" clip-rule="evenodd" d="M122.306 143.294C124.294 143.294 125.906 141.682 125.906 139.694C125.906 137.706 124.294 136.094 122.306 136.094C120.317 136.094 118.706 137.706 118.706 139.694C118.706 141.682 120.317 143.294 122.306 143.294ZM120.843 139.356C120.657 139.356 120.506 139.507 120.506 139.694C120.506 139.88 120.657 140.031 120.843 140.031H122.909L121.963 140.909C121.827 141.036 121.819 141.249 121.946 141.386C122.073 141.522 122.286 141.53 122.423 141.404L123.998 139.941C124.066 139.877 124.106 139.788 124.106 139.694C124.106 139.6 124.066 139.51 123.998 139.446L122.423 137.984C122.286 137.857 122.073 137.865 121.946 138.002C121.819 138.138 121.827 138.352 121.963 138.479L122.909 139.356H120.843Z" fill="#475569" fill-opacity="0.32"/>
<line x1="134.806" y1="140.194" x2="150.806" y2="140.194" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
</g>
<rect x="111.597" y="151.194" width="106.418" height="0.55426" fill="#475569" fill-opacity="0.23"/>
<g opacity="0.06">
<g clip-path="url(#clip3_993_2342)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M121.743 158.198C121.06 158.198 120.506 158.752 120.506 159.435V159.635C120.148 159.669 119.793 159.714 119.441 159.769C119.257 159.798 119.131 159.97 119.16 160.154C119.189 160.339 119.361 160.465 119.545 160.436L119.612 160.426L119.991 165.159C120.042 165.802 120.579 166.298 121.224 166.298H123.387C124.033 166.298 124.569 165.802 124.621 165.159L125 160.426L125.066 160.436C125.25 160.465 125.423 160.339 125.452 160.154C125.48 159.97 125.354 159.798 125.17 159.769C124.819 159.714 124.464 159.669 124.106 159.635V159.435C124.106 158.752 123.552 158.198 122.868 158.198H121.743ZM122.306 159.548C122.684 159.548 123.059 159.559 123.431 159.582V159.435C123.431 159.125 123.179 158.873 122.868 158.873H121.743C121.433 158.873 121.181 159.125 121.181 159.435V159.582C121.553 159.559 121.928 159.548 122.306 159.548ZM123.704 161.252C123.713 161.02 123.532 160.823 123.299 160.814C123.066 160.805 122.87 160.986 122.861 161.219L122.726 164.594C122.717 164.827 122.898 165.023 123.131 165.032C123.363 165.041 123.56 164.86 123.569 164.627L123.704 161.252ZM121.751 161.219C121.742 160.986 121.545 160.805 121.313 160.814C121.08 160.823 120.899 161.02 120.908 161.252L121.043 164.627C121.052 164.86 121.248 165.041 121.481 165.032C121.714 165.023 121.895 164.827 121.886 164.594L121.751 161.219Z" fill="#475569"/>
</g>
<line x1="134.806" y1="162.748" x2="164.806" y2="162.748" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
<rect x="199.806" y="157.748" width="9" height="9" rx="2" fill="#475569" fill-opacity="0.3"/>
</g>
</g>
</g>
<defs>
<linearGradient id="paint0_linear_993_2342" x1="164.5" y1="0" x2="164.5" y2="78.7086" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_993_2342" x1="164.5" y1="-1.02658e-07" x2="164.52" y2="117.577" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear_993_2342" x1="164.806" y1="47.0852" x2="164.806" y2="173.748" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip0_993_2342">
<rect width="329" height="173" fill="white"/>
</clipPath>
<clipPath id="clip1_993_2342">
<rect width="106.418" height="131.097" fill="white" transform="translate(111.597 42.6511)"/>
</clipPath>
<clipPath id="clip2_993_2342">
<rect width="8.99999" height="8.99999" fill="white" transform="translate(117.806 117.194)"/>
</clipPath>
<clipPath id="clip3_993_2342">
<rect width="8.99999" height="8.99999" fill="white" transform="translate(117.806 157.748)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

76
docs/public/illustrations/elements-light.svg Normal file
View File

@@ -0,0 +1,76 @@
<svg width="329" height="173" viewBox="0 0 329 173" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_993_2863)">
<rect x="0.5" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_2863)" fill-opacity="0.15" stroke="url(#paint1_linear_993_2863)"/>
<line x1="119.597" y1="33" x2="139.597" y2="33" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
<path d="M158.194 32.398L158.195 32.3982C158.212 32.4152 158.226 32.4355 158.235 32.4579C158.244 32.4802 158.249 32.5042 158.249 32.5284C158.249 32.5526 158.244 32.5765 158.235 32.5989C158.226 32.6212 158.212 32.6414 158.195 32.6584C158.195 32.6584 158.195 32.6585 158.195 32.6585L156.229 34.6015L156.229 34.6015L156.227 34.6035C156.21 34.6206 156.19 34.6343 156.167 34.6436L156.273 34.8974L156.167 34.6436C156.145 34.6529 156.121 34.6577 156.097 34.6577C156.073 34.6577 156.049 34.6529 156.026 34.6436L155.92 34.8974L156.026 34.6436C156.004 34.6343 155.984 34.6206 155.967 34.6035L155.967 34.6035L155.966 34.6027L154.022 32.6593L154.022 32.6593L154.022 32.6585C154.004 32.6415 153.991 32.6212 153.981 32.5989C153.972 32.5765 153.967 32.5526 153.967 32.5284C153.967 32.5042 153.972 32.4802 153.981 32.4579C153.991 32.4355 154.004 32.4152 154.022 32.3982L154.022 32.398C154.056 32.3638 154.103 32.3447 154.151 32.3447C154.199 32.3447 154.246 32.3638 154.28 32.3978C154.28 32.3978 154.28 32.3979 154.28 32.398L155.902 34.0199L156.095 34.213L156.29 34.0213L157.935 32.3988L157.936 32.398C157.97 32.3638 158.017 32.3447 158.065 32.3447C158.114 32.3447 158.16 32.3638 158.194 32.398Z" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="0.55"/>
<rect x="112.097" y="24.5" width="54" height="17" rx="2.5" stroke="#CBD5E1" stroke-opacity="0.7"/>
<g clip-path="url(#clip1_993_2863)">
<ellipse cx="122.709" cy="58.9341" rx="4.5669" ry="4.56691" fill="#CBD5E1" fill-opacity="0.5"/>
<line x1="135.209" y1="59.4341" x2="155.209" y2="59.4341" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
<rect x="112" y="70.4341" width="106.418" height="0.55426" fill="#CBD5E1" fill-opacity="0.32"/>
<g clip-path="url(#clip2_993_2863)">
<path d="M120.654 83.2508L121.222 81.8313C121.312 81.605 121.448 81.3994 121.62 81.227L124.734 78.1136C125.106 77.7408 125.711 77.7408 126.084 78.1136C126.456 78.4864 126.456 79.0908 126.084 79.4636L122.97 82.577C122.798 82.7494 122.592 82.885 122.366 82.9755L120.946 83.5433C120.763 83.6168 120.58 83.4345 120.654 83.2508Z" fill="#CBD5E1" fill-opacity="0.5"/>
<path d="M119.784 79.5758C119.784 79.2651 120.036 79.0133 120.346 79.0133H122.709C122.895 79.0133 123.046 78.8622 123.046 78.6758C123.046 78.4894 122.895 78.3383 122.709 78.3383H120.346C119.663 78.3383 119.109 78.8923 119.109 79.5758V83.8508C119.109 84.5342 119.663 85.0883 120.346 85.0883H124.621C125.305 85.0883 125.859 84.5342 125.859 83.8508V81.4883C125.859 81.3019 125.708 81.1508 125.521 81.1508C125.335 81.1508 125.184 81.3019 125.184 81.4883V83.8508C125.184 84.1614 124.932 84.4133 124.621 84.4133H120.346C120.036 84.4133 119.784 84.1614 119.784 83.8508V79.5758Z" fill="#CBD5E1" fill-opacity="0.5"/>
</g>
<line x1="135.209" y1="81.9883" x2="155.209" y2="81.9883" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
<rect x="200.209" y="76.9883" width="9" height="9" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
<g clip-path="url(#clip3_993_2863)">
<path d="M121.359 96.5634C121.359 96.1906 121.661 95.8884 122.034 95.8884H123.779C123.959 95.8884 124.13 95.9595 124.257 96.0861L125.661 97.4907C125.788 97.6173 125.859 97.789 125.859 97.968V100.613C125.859 100.986 125.557 101.288 125.184 101.288H124.734V99.768C124.734 99.4099 124.592 99.0666 124.339 98.8134L122.934 97.4088C122.681 97.1556 122.338 97.0134 121.979 97.0134H121.359V96.5634Z" fill="#CBD5E1" fill-opacity="0.5"/>
<path d="M120.234 97.6884C119.861 97.6884 119.559 97.9906 119.559 98.3634V102.413C119.559 102.786 119.861 103.088 120.234 103.088H123.384C123.757 103.088 124.059 102.786 124.059 102.413V99.768C124.059 99.589 123.988 99.4173 123.861 99.2907L122.457 97.8861C122.33 97.7595 122.159 97.6884 121.979 97.6884H120.234Z" fill="#CBD5E1" fill-opacity="0.5"/>
</g>
<line x1="135.209" y1="99.9883" x2="165.209" y2="99.9883" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
<rect x="200.209" y="94.9883" width="9" height="9" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
<rect x="112" y="110.988" width="106.418" height="0.55426" fill="#CBD5E1" fill-opacity="0.32"/>
<g clip-path="url(#clip4_993_2863)">
<path d="M119.109 118.893C118.86 118.893 118.659 119.094 118.659 119.343V119.793C118.659 120.041 118.86 120.243 119.109 120.243H126.309C126.557 120.243 126.759 120.041 126.759 119.793V119.343C126.759 119.094 126.557 118.893 126.309 118.893H119.109Z" fill="#CBD5E1" fill-opacity="0.5"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M119.109 120.918H126.309L125.944 124.387C125.895 124.845 125.509 125.193 125.048 125.193H120.369C119.908 125.193 119.522 124.845 119.474 124.387L119.109 120.918ZM121.359 122.493C121.359 122.244 121.56 122.043 121.809 122.043H123.609C123.857 122.043 124.059 122.244 124.059 122.493C124.059 122.741 123.857 122.943 123.609 122.943H121.809C121.56 122.943 121.359 122.741 121.359 122.493Z" fill="#CBD5E1" fill-opacity="0.5"/>
</g>
<line x1="135.209" y1="122.543" x2="157.209" y2="122.543" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
<g opacity="0.36">
<path fill-rule="evenodd" clip-rule="evenodd" d="M122.709 143.643C124.697 143.643 126.309 142.031 126.309 140.043C126.309 138.054 124.697 136.443 122.709 136.443C120.721 136.443 119.109 138.054 119.109 140.043C119.109 142.031 120.721 143.643 122.709 143.643ZM121.246 139.705C121.06 139.705 120.909 139.856 120.909 140.043C120.909 140.229 121.06 140.38 121.246 140.38H123.312L122.367 141.258C122.23 141.385 122.222 141.598 122.349 141.735C122.476 141.871 122.689 141.879 122.826 141.752L124.401 140.29C124.47 140.226 124.509 140.136 124.509 140.043C124.509 139.949 124.47 139.859 124.401 139.795L122.826 138.333C122.689 138.206 122.476 138.214 122.349 138.35C122.222 138.487 122.23 138.701 122.367 138.827L123.312 139.705H121.246Z" fill="#CBD5E1" fill-opacity="0.5"/>
<line x1="135.209" y1="140.543" x2="151.209" y2="140.543" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
</g>
<rect x="112" y="151.543" width="106.418" height="0.55426" fill="#CBD5E1" fill-opacity="0.32"/>
<g opacity="0.06">
<g clip-path="url(#clip5_993_2863)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M122.147 158.547C121.463 158.547 120.909 159.101 120.909 159.784V159.983C120.551 160.018 120.196 160.063 119.845 160.118C119.66 160.147 119.534 160.319 119.563 160.503C119.592 160.687 119.764 160.813 119.949 160.785L120.015 160.775L120.394 165.508C120.445 166.151 120.982 166.647 121.627 166.647H123.791C124.436 166.647 124.973 166.151 125.024 165.508L125.403 160.775L125.47 160.785C125.654 160.813 125.826 160.687 125.855 160.503C125.884 160.319 125.758 160.147 125.574 160.118C125.222 160.063 124.867 160.018 124.509 159.983V159.784C124.509 159.101 123.955 158.547 123.272 158.547H122.147ZM122.709 159.897C123.087 159.897 123.462 159.908 123.834 159.93V159.784C123.834 159.474 123.582 159.222 123.272 159.222H122.147C121.836 159.222 121.584 159.474 121.584 159.784V159.931C121.956 159.908 122.331 159.897 122.709 159.897ZM124.107 161.601C124.117 161.369 123.935 161.172 123.703 161.163C123.47 161.154 123.274 161.335 123.264 161.568L123.129 164.943C123.12 165.175 123.301 165.372 123.534 165.381C123.767 165.39 123.963 165.209 123.972 164.976L124.107 161.601ZM122.154 161.568C122.145 161.335 121.949 161.154 121.716 161.163C121.483 161.172 121.302 161.369 121.311 161.601L121.446 164.976C121.456 165.209 121.652 165.39 121.885 165.381C122.117 165.372 122.299 165.175 122.289 164.943L122.154 161.568Z" fill="#CBD5E1"/>
</g>
<line x1="135.209" y1="163.097" x2="165.209" y2="163.097" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
<rect x="200.209" y="158.097" width="9" height="9" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
</g>
<rect x="112.5" y="47.9341" width="105.418" height="125.663" rx="2.5" stroke="url(#paint2_linear_993_2863)" stroke-opacity="0.7"/>
</g>
</g>
<defs>
<linearGradient id="paint0_linear_993_2863" x1="164.5" y1="0" x2="164.5" y2="78.7086" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_993_2863" x1="164.5" y1="-1.02658e-07" x2="164.52" y2="117.577" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear_993_2863" x1="165.209" y1="47.4341" x2="165.209" y2="174.097" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip0_993_2863">
<rect width="329" height="173" fill="white"/>
</clipPath>
<clipPath id="clip1_993_2863">
<rect width="106.418" height="131.097" fill="white" transform="translate(112 43)"/>
</clipPath>
<clipPath id="clip2_993_2863">
<rect width="8.99999" height="8.99999" fill="white" transform="translate(118.209 76.9883)"/>
</clipPath>
<clipPath id="clip3_993_2863">
<rect width="8.99999" height="8.99999" fill="white" transform="translate(118.209 94.9883)"/>
</clipPath>
<clipPath id="clip4_993_2863">
<rect width="8.99999" height="8.99999" fill="white" transform="translate(118.209 117.543)"/>
</clipPath>
<clipPath id="clip5_993_2863">
<rect width="8.99999" height="8.99999" fill="white" transform="translate(118.209 158.097)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

40
docs/public/illustrations/forms-dark.svg Normal file
View File

@@ -0,0 +1,40 @@
<svg width="330" height="173" viewBox="0 0 330 173" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_993_2387)">
<rect x="1" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_2387)" fill-opacity="0.5" stroke="url(#paint1_linear_993_2387)"/>
<line x1="83.5" y1="29" x2="95.5" y2="29" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
<rect x="80.5" y="37.9034" width="168" height="14" rx="3" fill="#475569" fill-opacity="0.13"/>
<g clip-path="url(#clip1_993_2387)">
<path d="M91.7515 43.1536V46.6536C91.7515 46.8525 91.6724 47.0432 91.5318 47.1839C91.3911 47.3245 91.2004 47.4036 91.0015 47.4036H86.0015C85.8026 47.4036 85.6118 47.3245 85.4711 47.1839C85.3305 47.0432 85.2515 46.8525 85.2515 46.6536V43.1536M91.7515 43.1536C91.7515 42.9547 91.6724 42.7639 91.5318 42.6232C91.3911 42.4826 91.2004 42.4036 91.0015 42.4036H86.0015C85.8026 42.4036 85.6118 42.4826 85.4711 42.6232C85.3305 42.7639 85.2515 42.9547 85.2515 43.1536M91.7515 43.1536V43.2346C91.7515 43.3626 91.7187 43.4885 91.6563 43.6003C91.5938 43.7121 91.5038 43.8061 91.3948 43.8732L88.8948 45.4116C88.7765 45.4844 88.6404 45.523 88.5015 45.523C88.3626 45.523 88.2264 45.4844 88.1081 45.4116L85.6081 43.8736C85.4991 43.8064 85.4091 43.7125 85.3467 43.6007C85.2842 43.4889 85.2515 43.3629 85.2515 43.2349V43.1536" stroke="#475569" stroke-opacity="0.88" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<line x1="100.5" y1="44.9034" x2="166.5" y2="44.9034" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
<rect x="81" y="38.4034" width="167" height="13" rx="2.5" stroke="#475569" stroke-opacity="0.3"/>
<g opacity="0.8">
<line x1="83.5" y1="73" x2="118.5" y2="73" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
<rect x="80.5" y="81.9034" width="168" height="14" rx="3" fill="#475569" fill-opacity="0.13"/>
<line x1="87.5" y1="88.9034" x2="153.5" y2="88.9034" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
<rect x="81" y="82.4034" width="167" height="13" rx="2.5" stroke="#475569" stroke-opacity="0.3"/>
</g>
<g opacity="0.4">
<line x1="83.5" y1="117" x2="118.5" y2="117" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
<rect x="80.5" y="125.903" width="168" height="14" rx="3" fill="#475569" fill-opacity="0.13"/>
<line x1="87.5" y1="132.903" x2="153.5" y2="132.903" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
<rect x="81" y="126.403" width="167" height="13" rx="2.5" stroke="#475569" stroke-opacity="0.3"/>
</g>
</g>
<defs>
<linearGradient id="paint0_linear_993_2387" x1="165" y1="0" x2="165" y2="78.7086" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_993_2387" x1="165" y1="-1.02658e-07" x2="165.02" y2="117.577" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip0_993_2387">
<rect width="329" height="173" fill="white" transform="translate(0.5)"/>
</clipPath>
<clipPath id="clip1_993_2387">
<rect width="8" height="8" fill="white" transform="translate(84.5 40.9034)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

37
docs/public/illustrations/forms-light.svg Normal file
View File

@@ -0,0 +1,37 @@
<svg width="330" height="173" viewBox="0 0 330 173" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_993_2908)">
<rect x="1" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_2908)" fill-opacity="0.15" stroke="url(#paint1_linear_993_2908)"/>
<line x1="83.5" y1="29" x2="95.5" y2="29" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
<g clip-path="url(#clip1_993_2908)">
<path d="M91.7515 43.1535V46.6535C91.7515 46.8524 91.6724 47.0432 91.5318 47.1839C91.3911 47.3245 91.2004 47.4035 91.0015 47.4035H86.0015C85.8026 47.4035 85.6118 47.3245 85.4711 47.1839C85.3305 47.0432 85.2515 46.8524 85.2515 46.6535V43.1535M91.7515 43.1535C91.7515 42.9546 91.6724 42.7639 91.5318 42.6232C91.3911 42.4826 91.2004 42.4035 91.0015 42.4035H86.0015C85.8026 42.4035 85.6118 42.4826 85.4711 42.6232C85.3305 42.7639 85.2515 42.9546 85.2515 43.1535M91.7515 43.1535V43.2345C91.7515 43.3626 91.7187 43.4885 91.6563 43.6003C91.5938 43.7121 91.5038 43.806 91.3948 43.8732L88.8948 45.4115C88.7765 45.4844 88.6404 45.523 88.5015 45.523C88.3626 45.523 88.2264 45.4844 88.1081 45.4115L85.6081 43.8735C85.4991 43.8064 85.4091 43.7124 85.3467 43.6006C85.2842 43.4888 85.2515 43.3629 85.2515 43.2349V43.1535" stroke="#CBD5E1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<line x1="100.5" y1="44.9034" x2="166.5" y2="44.9034" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
<rect x="81" y="38.4034" width="167" height="13" rx="2.5" stroke="#CBD5E1" stroke-opacity="0.7"/>
<g opacity="0.8">
<line x1="83.5" y1="73" x2="118.5" y2="73" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
<line x1="87.5" y1="88.9034" x2="153.5" y2="88.9034" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
<rect x="81" y="82.4034" width="167" height="13" rx="2.5" stroke="#CBD5E1" stroke-opacity="0.7"/>
</g>
<g opacity="0.4">
<line x1="83.5" y1="117" x2="118.5" y2="117" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
<line x1="87.5" y1="132.903" x2="153.5" y2="132.903" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
<rect x="81" y="126.403" width="167" height="13" rx="2.5" stroke="#CBD5E1" stroke-opacity="0.7"/>
</g>
</g>
<defs>
<linearGradient id="paint0_linear_993_2908" x1="165" y1="0" x2="165" y2="78.7086" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_993_2908" x1="165" y1="-1.02658e-07" x2="165.02" y2="117.577" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip0_993_2908">
<rect width="329" height="173" fill="white" transform="translate(0.5)"/>
</clipPath>
<clipPath id="clip1_993_2908">
<rect width="8" height="8" fill="white" transform="translate(84.5 40.9034)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

96
docs/public/illustrations/fully-customizable-dark.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 313 KiB

87
docs/public/illustrations/fully-customizable-light.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 311 KiB

51
docs/public/illustrations/icon-library-dark.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

55
docs/public/illustrations/icon-library-light.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

177
docs/public/illustrations/keyboard-shortcuts-dark.svg Normal file
View File

@@ -0,0 +1,177 @@
<svg width="444" height="160" viewBox="0 0 444 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_993_5983)">
<g filter="url(#filter0_f_993_5983)">
<rect x="112.809" y="113" width="24" height="32" transform="rotate(36 112.809 113)" fill="url(#paint0_radial_993_5983)"/>
</g>
<g filter="url(#filter1_f_993_5983)">
<rect x="274.809" y="64" width="24" height="32" transform="rotate(36 274.809 64)" fill="url(#paint1_radial_993_5983)"/>
</g>
<rect width="444" height="160" rx="8" fill="url(#paint2_linear_993_5983)" fill-opacity="0.12"/>
<rect x="11" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="39" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="67" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="95" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="123" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="151" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="179" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="207" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="235" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="263" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="291" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="320" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="348" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="376" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="404" y="29" width="29" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="325" y="128" width="23" height="21" rx="2" fill="url(#paint3_linear_993_5983)" fill-opacity="0.16"/>
<rect x="353" y="140" width="23.7037" height="9" rx="2" fill="url(#paint4_linear_993_5983)" fill-opacity="0.16"/>
<rect x="381.642" y="140" width="23.7037" height="9" rx="2" fill="url(#paint5_linear_993_5983)" fill-opacity="0.16"/>
<rect x="409.296" y="140" width="23.7037" height="9" rx="2" fill="url(#paint6_linear_993_5983)" fill-opacity="0.16"/>
<rect x="381.642" y="128" width="23.7037" height="9" rx="2" fill="url(#paint7_linear_993_5983)" fill-opacity="0.16"/>
<rect x="11" y="128" width="23" height="21" rx="2" fill="url(#paint8_linear_993_5983)" fill-opacity="0.16"/>
<rect x="39" y="128" width="23" height="21" rx="2" fill="url(#paint9_linear_993_5983)" fill-opacity="0.16"/>
<rect x="67" y="128" width="23" height="21" rx="2" fill="url(#paint10_linear_993_5983)" fill-opacity="0.16"/>
<rect x="95" y="128" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.3"/>
<rect x="95.5" y="128.5" width="22" height="20" rx="1.5" stroke="#475569" stroke-opacity="0.2"/>
<rect x="95.5" y="128.5" width="22" height="20" rx="1.5" stroke="url(#paint11_linear_993_5983)" stroke-opacity="0.5"/>
<rect x="293" y="128" width="27" height="21" rx="2" fill="url(#paint12_linear_993_5983)" fill-opacity="0.16"/>
<rect x="123" y="128" width="165" height="21" rx="2" fill="url(#paint13_linear_993_5983)" fill-opacity="0.16"/>
<rect x="327" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="299" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="271" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="243" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="215" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="187" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="159" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="131" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="103" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="75" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="355" y="103" width="78" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="11" y="103" width="59" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="393" y="53" width="40" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="365" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="337" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="309" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="281" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="253" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="225" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="197" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="169" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="141" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="113" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="85" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="57" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="11" y="53" width="41" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="60" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="88" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="116" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="144" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="172" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="200" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="228" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="256" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.3"/>
<rect x="256.5" y="78.5" width="22" height="20" rx="1.5" stroke="#475569" stroke-opacity="0.2"/>
<rect x="256.5" y="78.5" width="22" height="20" rx="1.5" stroke="url(#paint14_linear_993_5983)" stroke-opacity="0.5"/>
<rect x="284" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="312" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="340" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="368" y="78" width="65" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="11" y="78" width="44" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="11" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="39" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="67" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="95" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="123" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="151" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="179" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="207" y="10" width="24" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="236" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="264" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="292" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="320" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="348" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="376" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="404" y="10" width="29" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<path d="M264 94V83H265.383V87.9814L270.189 83H271.934L267.654 87.3843L272 94H270.321L266.667 88.4057L265.383 89.71V94H264Z" fill="#94A3B8"/>
<path d="M109.75 139.5H108.5V137.5H109.75C110.195 137.5 110.63 137.368 111 137.121C111.37 136.874 111.658 136.522 111.829 136.111C111.999 135.7 112.044 135.248 111.957 134.811C111.87 134.375 111.656 133.974 111.341 133.659C111.026 133.344 110.625 133.13 110.189 133.043C109.752 132.956 109.3 133.001 108.889 133.171C108.478 133.342 108.126 133.63 107.879 134C107.632 134.37 107.5 134.805 107.5 135.25V136.5H105.5V135.25C105.5 134.805 105.368 134.37 105.121 134C104.874 133.63 104.522 133.342 104.111 133.171C103.7 133.001 103.248 132.956 102.811 133.043C102.375 133.13 101.974 133.344 101.659 133.659C101.344 133.974 101.13 134.375 101.043 134.811C100.956 135.248 101.001 135.7 101.171 136.111C101.342 136.522 101.63 136.874 102 137.121C102.37 137.368 102.805 137.5 103.25 137.5H104.5V139.5H103.25C102.805 139.5 102.37 139.632 102 139.879C101.63 140.126 101.342 140.478 101.171 140.889C101.001 141.3 100.956 141.752 101.043 142.189C101.13 142.625 101.344 143.026 101.659 143.341C101.974 143.656 102.375 143.87 102.811 143.957C103.248 144.044 103.7 143.999 104.111 143.829C104.522 143.658 104.874 143.37 105.121 143C105.368 142.63 105.5 142.195 105.5 141.75V140.5H107.5V141.75C107.5 142.195 107.632 142.63 107.879 143C108.126 143.37 108.478 143.658 108.889 143.829C109.3 143.999 109.752 144.044 110.189 143.957C110.625 143.87 111.026 143.656 111.341 143.341C111.656 143.026 111.87 142.625 111.957 142.189C112.044 141.752 111.999 141.3 111.829 140.889C111.658 140.478 111.37 140.126 111 139.879C110.63 139.632 110.195 139.5 109.75 139.5ZM108.5 135.25C108.5 135.003 108.573 134.761 108.711 134.556C108.848 134.35 109.043 134.19 109.272 134.095C109.5 134.001 109.751 133.976 109.994 134.024C110.236 134.072 110.459 134.191 110.634 134.366C110.809 134.541 110.928 134.764 110.976 135.006C111.024 135.249 110.999 135.5 110.905 135.728C110.81 135.957 110.65 136.152 110.444 136.289C110.239 136.427 109.997 136.5 109.75 136.5H108.5V135.25ZM102 135.25C102 134.918 102.132 134.601 102.366 134.366C102.601 134.132 102.918 134 103.25 134C103.582 134 103.899 134.132 104.134 134.366C104.368 134.601 104.5 134.918 104.5 135.25V136.5H103.25C102.919 136.498 102.602 136.366 102.368 136.132C102.134 135.898 102.002 135.581 102 135.25ZM104.5 141.75C104.5 141.997 104.427 142.239 104.289 142.444C104.152 142.65 103.957 142.81 103.728 142.905C103.5 142.999 103.249 143.024 103.006 142.976C102.764 142.928 102.541 142.809 102.366 142.634C102.191 142.459 102.072 142.236 102.024 141.994C101.976 141.751 102.001 141.5 102.095 141.272C102.19 141.043 102.35 140.848 102.556 140.711C102.761 140.573 103.003 140.5 103.25 140.5H104.5V141.75ZM105.5 137.5H107.5V139.5H105.5V137.5ZM109.75 143C109.419 142.998 109.102 142.866 108.868 142.632C108.634 142.398 108.502 142.081 108.5 141.75V140.5H109.75C110.082 140.5 110.399 140.632 110.634 140.866C110.868 141.101 111 141.418 111 141.75C111 142.082 110.868 142.399 110.634 142.634C110.399 142.868 110.082 143 109.75 143Z" fill="#94A3B8"/>
<rect x="0.5" y="0.5" width="443" height="159" rx="7.5" stroke="url(#paint15_linear_993_5983)" stroke-opacity="0.5"/>
</g>
<defs>
<filter id="filter0_f_993_5983" x="82" y="101" width="62.2256" height="63.9954" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur_993_5983"/>
</filter>
<filter id="filter1_f_993_5983" x="244" y="52" width="62.2256" height="63.9954" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur_993_5983"/>
</filter>
<radialGradient id="paint0_radial_993_5983" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(124.809 129) rotate(90) scale(16 12)">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint1_radial_993_5983" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(286.809 80) rotate(90) scale(16 12)">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</radialGradient>
<linearGradient id="paint2_linear_993_5983" x1="222" y1="0" x2="222" y2="88.5496" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint3_linear_993_5983" x1="336.52" y1="119.214" x2="330.425" y2="147.7" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint4_linear_993_5983" x1="364.873" y1="136.235" x2="363.746" y2="148.902" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint5_linear_993_5983" x1="393.515" y1="136.235" x2="392.388" y2="148.902" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint6_linear_993_5983" x1="421.169" y1="136.235" x2="420.042" y2="148.902" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint7_linear_993_5983" x1="393.515" y1="124.235" x2="392.388" y2="136.902" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint8_linear_993_5983" x1="22.5202" y1="119.214" x2="16.4252" y2="147.7" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint9_linear_993_5983" x1="50.5202" y1="119.214" x2="44.4252" y2="147.7" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint10_linear_993_5983" x1="78.5202" y1="119.214" x2="72.4252" y2="147.7" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint11_linear_993_5983" x1="117.406" y1="126.25" x2="103.679" y2="128.103" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint12_linear_993_5983" x1="306.524" y1="119.214" x2="301.269" y2="148.046" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint13_linear_993_5983" x1="205.645" y1="119.214" x2="204.757" y2="148.978" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint14_linear_993_5983" x1="278.406" y1="76.25" x2="264.679" y2="78.1028" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint15_linear_993_5983" x1="222" y1="0" x2="222" y2="88.5496" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip0_993_5983">
<rect width="444" height="160" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

172
docs/public/illustrations/keyboard-shortcuts-light.svg Normal file
View File

@@ -0,0 +1,172 @@
<svg width="444" height="160" viewBox="0 0 444 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_963_1452)">
<rect x="11" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="39" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="67" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="95" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="123" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="151" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="179" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="207" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="235" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="263" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="291" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="320" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="348" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="376" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="404" y="29" width="29" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="325" y="128" width="23" height="21" rx="2" fill="url(#paint0_linear_963_1452)" fill-opacity="0.22"/>
<rect x="353" y="140" width="23.7037" height="9" rx="2" fill="url(#paint1_linear_963_1452)" fill-opacity="0.22"/>
<rect x="381.642" y="140" width="23.7037" height="9" rx="2" fill="url(#paint2_linear_963_1452)" fill-opacity="0.22"/>
<rect x="409.296" y="140" width="23.7037" height="9" rx="2" fill="url(#paint3_linear_963_1452)" fill-opacity="0.22"/>
<rect x="381.642" y="128" width="23.7037" height="9" rx="2" fill="url(#paint4_linear_963_1452)" fill-opacity="0.22"/>
<rect x="11" y="128" width="23" height="21" rx="2" fill="url(#paint5_linear_963_1452)" fill-opacity="0.22"/>
<rect x="39" y="128" width="23" height="21" rx="2" fill="url(#paint6_linear_963_1452)" fill-opacity="0.22"/>
<rect x="67" y="128" width="23" height="21" rx="2" fill="url(#paint7_linear_963_1452)" fill-opacity="0.22"/>
<rect x="95" y="128" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.07"/>
<rect x="95.5" y="128.5" width="22" height="20" rx="1.5" stroke="#CBD5E1" stroke-opacity="0.25"/>
<rect x="95.5" y="128.5" width="22" height="20" rx="1.5" stroke="url(#paint8_linear_963_1452)" stroke-opacity="0.51"/>
<rect x="293" y="128" width="27" height="21" rx="2" fill="url(#paint9_linear_963_1452)" fill-opacity="0.22"/>
<rect x="123" y="128" width="165" height="21" rx="2" fill="url(#paint10_linear_963_1452)" fill-opacity="0.22"/>
<rect x="327" y="103" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="299" y="103" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="271" y="103" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="243" y="103" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="215" y="103" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="187" y="103" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="159" y="103" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="131" y="103" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="103" y="103" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="75" y="103" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="355" y="103" width="78" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="11" y="103" width="59" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="393" y="53" width="40" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="365" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="337" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="309" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="281" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="253" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="225" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="197" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="169" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="141" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="113" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="85" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="57" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="11" y="53" width="41" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="60" y="78" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="88" y="78" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="116" y="78" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="144" y="78" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="172" y="78" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="200" y="78" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="228" y="78" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="256" y="78" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.07"/>
<rect x="256.5" y="78.5" width="22" height="20" rx="1.5" stroke="#CBD5E1" stroke-opacity="0.25"/>
<rect x="256.5" y="78.5" width="22" height="20" rx="1.5" stroke="url(#paint11_linear_963_1452)" stroke-opacity="0.51"/>
<rect x="284" y="78" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="312" y="78" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="340" y="78" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="368" y="78" width="65" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="11" y="78" width="44" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="11" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="39" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="67" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="95" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="123" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="151" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="179" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="207" y="10" width="24" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="236" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="264" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="292" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="320" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="348" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="376" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<rect x="404" y="10" width="29" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
<path d="M264 94V83H265.383V87.9814L270.189 83H271.934L267.654 87.3843L272 94H270.321L266.667 88.4057L265.383 89.71V94H264Z" fill="#94A3B8"/>
<path d="M109.75 139.5H108.5V137.5H109.75C110.195 137.5 110.63 137.368 111 137.121C111.37 136.874 111.658 136.522 111.829 136.111C111.999 135.7 112.044 135.248 111.957 134.811C111.87 134.375 111.656 133.974 111.341 133.659C111.026 133.344 110.625 133.13 110.189 133.043C109.752 132.956 109.3 133.001 108.889 133.171C108.478 133.342 108.126 133.63 107.879 134C107.632 134.37 107.5 134.805 107.5 135.25V136.5H105.5V135.25C105.5 134.805 105.368 134.37 105.121 134C104.874 133.63 104.522 133.342 104.111 133.171C103.7 133.001 103.248 132.956 102.811 133.043C102.375 133.13 101.974 133.344 101.659 133.659C101.344 133.974 101.13 134.375 101.043 134.811C100.956 135.248 101.001 135.7 101.171 136.111C101.342 136.522 101.63 136.874 102 137.121C102.37 137.368 102.805 137.5 103.25 137.5H104.5V139.5H103.25C102.805 139.5 102.37 139.632 102 139.879C101.63 140.126 101.342 140.478 101.171 140.889C101.001 141.3 100.956 141.752 101.043 142.189C101.13 142.625 101.344 143.026 101.659 143.341C101.974 143.656 102.375 143.87 102.811 143.957C103.248 144.044 103.7 143.999 104.111 143.829C104.522 143.658 104.874 143.37 105.121 143C105.368 142.63 105.5 142.195 105.5 141.75V140.5H107.5V141.75C107.5 142.195 107.632 142.63 107.879 143C108.126 143.37 108.478 143.658 108.889 143.829C109.3 143.999 109.752 144.044 110.189 143.957C110.625 143.87 111.026 143.656 111.341 143.341C111.656 143.026 111.87 142.625 111.957 142.189C112.044 141.752 111.999 141.3 111.829 140.889C111.658 140.478 111.37 140.126 111 139.879C110.63 139.632 110.195 139.5 109.75 139.5ZM108.5 135.25C108.5 135.003 108.573 134.761 108.711 134.556C108.848 134.35 109.043 134.19 109.272 134.095C109.5 134.001 109.751 133.976 109.994 134.024C110.236 134.072 110.459 134.191 110.634 134.366C110.809 134.541 110.928 134.764 110.976 135.006C111.024 135.249 110.999 135.5 110.905 135.728C110.81 135.957 110.65 136.152 110.444 136.289C110.239 136.427 109.997 136.5 109.75 136.5H108.5V135.25ZM102 135.25C102 134.918 102.132 134.601 102.366 134.366C102.601 134.132 102.918 134 103.25 134C103.582 134 103.899 134.132 104.134 134.366C104.368 134.601 104.5 134.918 104.5 135.25V136.5H103.25C102.919 136.498 102.602 136.366 102.368 136.132C102.134 135.898 102.002 135.581 102 135.25ZM104.5 141.75C104.5 141.997 104.427 142.239 104.289 142.444C104.152 142.65 103.957 142.81 103.728 142.905C103.5 142.999 103.249 143.024 103.006 142.976C102.764 142.928 102.541 142.809 102.366 142.634C102.191 142.459 102.072 142.236 102.024 141.994C101.976 141.751 102.001 141.5 102.095 141.272C102.19 141.043 102.35 140.848 102.556 140.711C102.761 140.573 103.003 140.5 103.25 140.5H104.5V141.75ZM105.5 137.5H107.5V139.5H105.5V137.5ZM109.75 143C109.419 142.998 109.102 142.866 108.868 142.632C108.634 142.398 108.502 142.081 108.5 141.75V140.5H109.75C110.082 140.5 110.399 140.632 110.634 140.866C110.868 141.101 111 141.418 111 141.75C111 142.082 110.868 142.399 110.634 142.634C110.399 142.868 110.082 143 109.75 143Z" fill="#94A3B8"/>
<rect x="0.5" y="0.5" width="443" height="159" rx="7.5" stroke="url(#paint12_linear_963_1452)" stroke-opacity="0.8"/>
<g filter="url(#filter0_f_963_1452)">
<rect x="113.809" y="113" width="24" height="32" transform="rotate(36 113.809 113)" fill="url(#paint13_radial_963_1452)"/>
</g>
<g filter="url(#filter1_f_963_1452)">
<rect x="274.809" y="63" width="24" height="32" transform="rotate(36 274.809 63)" fill="url(#paint14_radial_963_1452)"/>
</g>
</g>
<defs>
<filter id="filter0_f_963_1452" x="75" y="93" width="78.2256" height="79.9954" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_963_1452"/>
</filter>
<filter id="filter1_f_963_1452" x="236" y="43" width="78.2256" height="79.9954" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_963_1452"/>
</filter>
<linearGradient id="paint0_linear_963_1452" x1="336.52" y1="119.214" x2="330.425" y2="147.7" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_963_1452" x1="364.873" y1="136.235" x2="363.746" y2="148.902" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear_963_1452" x1="393.515" y1="136.235" x2="392.388" y2="148.902" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint3_linear_963_1452" x1="421.169" y1="136.235" x2="420.042" y2="148.902" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint4_linear_963_1452" x1="393.515" y1="124.235" x2="392.388" y2="136.902" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint5_linear_963_1452" x1="22.5202" y1="119.214" x2="16.4252" y2="147.7" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint6_linear_963_1452" x1="50.5202" y1="119.214" x2="44.4252" y2="147.7" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint7_linear_963_1452" x1="78.5202" y1="119.214" x2="72.4252" y2="147.7" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint8_linear_963_1452" x1="117.406" y1="126.25" x2="103.679" y2="128.103" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint9_linear_963_1452" x1="306.524" y1="119.214" x2="301.269" y2="148.046" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint10_linear_963_1452" x1="205.645" y1="119.214" x2="204.757" y2="148.978" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint11_linear_963_1452" x1="278.406" y1="76.25" x2="264.679" y2="78.1028" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint12_linear_963_1452" x1="222" y1="0" x2="222" y2="88.5496" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<radialGradient id="paint13_radial_963_1452" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(125.809 129) rotate(90) scale(16 12)">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint14_radial_963_1452" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(286.809 79) rotate(90) scale(16 12)">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</radialGradient>
<clipPath id="clip0_963_1452">
<rect width="444" height="160" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

76
docs/public/illustrations/layout-dark.svg Normal file
View File

@@ -0,0 +1,76 @@
<svg width="329" height="173" viewBox="0 0 329 173" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_993_2547)">
<rect x="0.5" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_2547)" fill-opacity="0.5" stroke="url(#paint1_linear_993_2547)"/>
<g clip-path="url(#clip1_993_2547)">
<rect x="56.7998" y="24" width="215" height="140" rx="4" fill="url(#paint2_linear_993_2547)" fill-opacity="0.21"/>
<g clip-path="url(#clip2_993_2547)">
<path d="M-94.3474 179.245L86.5752 -8.10548M-89.1113 179.154L91.8113 -8.19687M-83.8752 179.063L97.0474 -8.28827M-78.6391 178.971L102.284 -8.37967M-73.4029 178.88L107.52 -8.47106M-68.1668 178.788L112.756 -8.56246M-62.9307 178.697L117.992 -8.65386M-57.6946 178.606L123.228 -8.74525M-52.4585 178.514L128.464 -8.83665M-47.2224 178.423L133.7 -8.92805M-41.9863 178.331L138.936 -9.01944M-36.7501 178.24L144.172 -9.11084M-31.514 178.149L149.409 -9.20224M-26.2779 178.057L154.645 -9.29363M-21.0418 177.966L159.881 -9.38503M-15.8057 177.874L165.117 -9.47643M-10.5696 177.783L170.353 -9.56782M-5.33344 177.692L175.589 -9.65922M-0.0973381 177.6L180.825 -9.75062M5.13878 177.509L186.061 -9.84201M10.3749 177.417L191.297 -9.93341M15.611 177.326L196.534 -10.0248M20.8471 177.235L201.77 -10.1162M26.0832 177.143L207.006 -10.2076M31.3194 177.052L212.242 -10.299M36.5555 176.96L217.478 -10.3904M41.7916 176.869L222.714 -10.4818M47.0277 176.778L227.95 -10.5732M52.2638 176.686L233.186 -10.6646M57.4999 176.595L238.423 -10.756M62.736 176.503L243.659 -10.8474M67.9722 176.412L248.895 -10.9388M73.2083 176.321L254.131 -11.0302M78.4444 176.229L259.367 -11.1216M83.6805 176.138L264.603 -11.213M88.9166 176.046L269.839 -11.3044M94.1527 175.955L275.075 -11.3958M99.3888 175.864L280.311 -11.4872M104.625 175.772L285.548 -11.5786M109.861 175.681L290.784 -11.6699M115.097 175.589L296.02 -11.7613M120.333 175.498L301.256 -11.8527M125.569 175.407L306.492 -11.9441M130.806 175.315L311.728 -12.0355M136.042 175.224L316.964 -12.1269M141.278 175.133L322.2 -12.2183M146.514 175.041L327.436 -12.3097M151.75 174.95L332.673 -12.4011M156.986 174.858L337.909 -12.4925M162.222 174.767L343.145 -12.5839M167.458 174.676L348.381 -12.6753M172.694 174.584L353.617 -12.7667M177.931 174.493L358.853 -12.8581M183.167 174.401L364.089 -12.9495M188.403 174.31L369.325 -13.0409M193.639 174.219L374.562 -13.1323M198.875 174.127L379.798 -13.2237M204.111 174.036L385.034 -13.3151M209.347 173.944L390.27 -13.4065M214.583 173.853L395.506 -13.4979M219.819 173.762L400.742 -13.5893M225.056 173.67L405.978 -13.6807M230.292 173.579L411.214 -13.7721M235.528 173.487L416.45 -13.8635M240.764 173.396L421.687 -13.9549M246 173.305L426.923 -14.0463M251.236 173.213L432.159 -14.1377M256.472 173.122L437.395 -14.2291" stroke="url(#paint3_linear_993_2547)" stroke-opacity="0.4" stroke-width="0.436409"/>
</g>
<rect x="64.9498" y="32.15" width="198.7" height="19.7" rx="1.85" stroke="#475569" stroke-opacity="0.9" stroke-width="0.3" stroke-dasharray="1.37 1.37"/>
<rect x="56.7998" y="60" width="215" height="0.5" fill="#475569" fill-opacity="0.2"/>
<g clip-path="url(#clip3_993_2547)">
<path d="M-94.3474 215.745L86.5752 28.3945M-89.1113 215.654L91.8113 28.3031M-83.8752 215.563L97.0474 28.2117M-78.6391 215.471L102.284 28.1203M-73.4029 215.38L107.52 28.0289M-68.1668 215.288L112.756 27.9375M-62.9307 215.197L117.992 27.8461M-57.6946 215.106L123.228 27.7547M-52.4585 215.014L128.464 27.6634M-47.2224 214.923L133.7 27.572M-41.9863 214.831L138.936 27.4806M-36.7501 214.74L144.172 27.3892M-31.514 214.649L149.409 27.2978M-26.2779 214.557L154.645 27.2064M-21.0418 214.466L159.881 27.115M-15.8057 214.374L165.117 27.0236M-10.5696 214.283L170.353 26.9322M-5.33344 214.192L175.589 26.8408M-0.0973381 214.1L180.825 26.7494M5.13878 214.009L186.061 26.658M10.3749 213.917L191.297 26.5666M15.611 213.826L196.534 26.4752M20.8471 213.735L201.77 26.3838M26.0832 213.643L207.006 26.2924M31.3194 213.552L212.242 26.201M36.5555 213.46L217.478 26.1096M41.7916 213.369L222.714 26.0182M47.0277 213.278L227.95 25.9268M52.2638 213.186L233.186 25.8354M57.4999 213.095L238.423 25.744M62.736 213.003L243.659 25.6526M67.9722 212.912L248.895 25.5612M73.2083 212.821L254.131 25.4698M78.4444 212.729L259.367 25.3784M83.6805 212.638L264.603 25.287M88.9166 212.546L269.839 25.1956M94.1527 212.455L275.075 25.1042M99.3888 212.364L280.311 25.0128M104.625 212.272L285.548 24.9214M109.861 212.181L290.784 24.8301M115.097 212.089L296.02 24.7387M120.333 211.998L301.256 24.6473M125.569 211.907L306.492 24.5559M130.806 211.815L311.728 24.4645M136.042 211.724L316.964 24.3731M141.278 211.633L322.2 24.2817M146.514 211.541L327.436 24.1903M151.75 211.45L332.673 24.0989M156.986 211.358L337.909 24.0075M162.222 211.267L343.145 23.9161M167.458 211.176L348.381 23.8247M172.694 211.084L353.617 23.7333M177.931 210.993L358.853 23.6419M183.167 210.901L364.089 23.5505M188.403 210.81L369.325 23.4591M193.639 210.719L374.562 23.3677M198.875 210.627L379.798 23.2763M204.111 210.536L385.034 23.1849M209.347 210.444L390.27 23.0935M214.583 210.353L395.506 23.0021M219.819 210.262L400.742 22.9107M225.056 210.17L405.978 22.8193M230.292 210.079L411.214 22.7279M235.528 209.987L416.45 22.6365M240.764 209.896L421.687 22.5451M246 209.805L426.923 22.4537M251.236 209.713L432.159 22.3623M256.472 209.622L437.395 22.2709" stroke="url(#paint4_linear_993_2547)" stroke-opacity="0.4" stroke-width="0.436409"/>
</g>
<rect x="64.9498" y="68.65" width="198.7" height="50.7" rx="1.85" stroke="url(#paint5_linear_993_2547)" stroke-opacity="0.9" stroke-width="0.3" stroke-dasharray="1.37 1.37"/>
<rect opacity="0.5" x="56.7998" y="127.5" width="215" height="0.5" fill="#475569" fill-opacity="0.2"/>
<g clip-path="url(#clip4_993_2547)">
<path d="M-94.3474 283.245L86.5752 95.8945M-89.1113 283.154L91.8113 95.8031M-83.8752 283.063L97.0474 95.7117M-78.6391 282.971L102.284 95.6203M-73.4029 282.88L107.52 95.5289M-68.1668 282.788L112.756 95.4375M-62.9307 282.697L117.992 95.3461M-57.6946 282.606L123.228 95.2547M-52.4585 282.514L128.464 95.1634M-47.2224 282.423L133.7 95.072M-41.9863 282.331L138.936 94.9806M-36.7501 282.24L144.172 94.8892M-31.514 282.149L149.409 94.7978M-26.2779 282.057L154.645 94.7064M-21.0418 281.966L159.881 94.615M-15.8057 281.874L165.117 94.5236M-10.5696 281.783L170.353 94.4322M-5.33344 281.692L175.589 94.3408M-0.0973381 281.6L180.825 94.2494M5.13878 281.509L186.061 94.158M10.3749 281.417L191.297 94.0666M15.611 281.326L196.534 93.9752M20.8471 281.235L201.77 93.8838M26.0832 281.143L207.006 93.7924M31.3194 281.052L212.242 93.701M36.5555 280.96L217.478 93.6096M41.7916 280.869L222.714 93.5182M47.0277 280.778L227.95 93.4268M52.2638 280.686L233.186 93.3354M57.4999 280.595L238.423 93.244M62.736 280.503L243.659 93.1526M67.9722 280.412L248.895 93.0612M73.2083 280.321L254.131 92.9698M78.4444 280.229L259.367 92.8784M83.6805 280.138L264.603 92.787M88.9166 280.046L269.839 92.6956M94.1527 279.955L275.075 92.6042M99.3888 279.864L280.311 92.5128M104.625 279.772L285.548 92.4214M109.861 279.681L290.784 92.3301M115.097 279.589L296.02 92.2387M120.333 279.498L301.256 92.1473M125.569 279.407L306.492 92.0559M130.806 279.315L311.728 91.9645M136.042 279.224L316.964 91.8731M141.278 279.133L322.2 91.7817M146.514 279.041L327.436 91.6903M151.75 278.95L332.673 91.5989M156.986 278.858L337.909 91.5075M162.222 278.767L343.145 91.4161M167.458 278.676L348.381 91.3247M172.694 278.584L353.617 91.2333M177.931 278.493L358.853 91.1419M183.167 278.401L364.089 91.0505M188.403 278.31L369.325 90.9591M193.639 278.219L374.562 90.8677M198.875 278.127L379.798 90.7763M204.111 278.036L385.034 90.6849M209.347 277.944L390.27 90.5935M214.583 277.853L395.506 90.5021M219.819 277.762L400.742 90.4107M225.056 277.67L405.978 90.3193M230.292 277.579L411.214 90.2279M235.528 277.487L416.45 90.1365M240.764 277.396L421.687 90.0451M246 277.305L426.923 89.9537M251.236 277.213L432.159 89.8623M256.472 277.122L437.395 89.7709" stroke="url(#paint6_linear_993_2547)" stroke-opacity="0.2" stroke-width="0.436409"/>
</g>
<rect x="64.9498" y="136.15" width="198.7" height="19.7" rx="1.85" stroke="url(#paint7_linear_993_2547)" stroke-opacity="0.4" stroke-width="0.3" stroke-dasharray="1.37 1.37"/>
</g>
<rect x="57.2998" y="24.5" width="214" height="139" rx="3.5" stroke="url(#paint8_linear_993_2547)" stroke-opacity="0.42"/>
</g>
<defs>
<linearGradient id="paint0_linear_993_2547" x1="164.5" y1="0" x2="164.5" y2="78.7086" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_993_2547" x1="164.5" y1="-1.02658e-07" x2="164.52" y2="117.577" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear_993_2547" x1="164.3" y1="24" x2="164.3" y2="164" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint3_linear_993_2547" x1="166.463" y1="23.2012" x2="166.491" y2="86.5041" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint4_linear_993_2547" x1="166.629" y1="90.8018" x2="166.425" y2="130.157" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint5_linear_993_2547" x1="164.3" y1="68.5" x2="164.3" y2="119.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0.16"/>
</linearGradient>
<linearGradient id="paint6_linear_993_2547" x1="166.463" y1="127.201" x2="166.491" y2="190.504" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint7_linear_993_2547" x1="164.3" y1="136" x2="164" y2="154.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint8_linear_993_2547" x1="164.3" y1="24" x2="164.3" y2="164" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip0_993_2547">
<rect width="329" height="173" fill="white"/>
</clipPath>
<clipPath id="clip1_993_2547">
<rect x="56.7998" y="24" width="215" height="140" rx="4" fill="white"/>
</clipPath>
<clipPath id="clip2_993_2547">
<rect x="64.7998" y="32" width="199" height="20" rx="2" fill="white"/>
</clipPath>
<clipPath id="clip3_993_2547">
<rect x="64.7998" y="68.5" width="199" height="51" rx="2" fill="white"/>
</clipPath>
<clipPath id="clip4_993_2547">
<rect x="64.7998" y="136" width="199" height="20" rx="2" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

71
docs/public/illustrations/layout-light.svg Normal file
View File

@@ -0,0 +1,71 @@
<svg width="329" height="173" viewBox="0 0 329 173" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_993_3064)">
<rect x="0.5" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_3064)" fill-opacity="0.15" stroke="url(#paint1_linear_993_3064)"/>
<g clip-path="url(#clip1_993_3064)">
<g clip-path="url(#clip2_993_3064)">
<path d="M-94.3474 179.245L86.5752 -8.10548M-89.1113 179.154L91.8113 -8.19687M-83.8752 179.063L97.0474 -8.28827M-78.6391 178.971L102.284 -8.37967M-73.4029 178.88L107.52 -8.47106M-68.1668 178.788L112.756 -8.56246M-62.9307 178.697L117.992 -8.65386M-57.6946 178.606L123.228 -8.74525M-52.4585 178.514L128.464 -8.83665M-47.2224 178.423L133.7 -8.92805M-41.9863 178.331L138.936 -9.01944M-36.7501 178.24L144.172 -9.11084M-31.514 178.149L149.409 -9.20224M-26.2779 178.057L154.645 -9.29363M-21.0418 177.966L159.881 -9.38503M-15.8057 177.874L165.117 -9.47643M-10.5696 177.783L170.353 -9.56782M-5.33344 177.692L175.589 -9.65922M-0.0973381 177.6L180.825 -9.75062M5.13878 177.509L186.061 -9.84201M10.3749 177.417L191.297 -9.93341M15.611 177.326L196.534 -10.0248M20.8471 177.235L201.77 -10.1162M26.0832 177.143L207.006 -10.2076M31.3194 177.052L212.242 -10.299M36.5555 176.96L217.478 -10.3904M41.7916 176.869L222.714 -10.4818M47.0277 176.778L227.95 -10.5732M52.2638 176.686L233.186 -10.6646M57.4999 176.595L238.423 -10.756M62.736 176.503L243.659 -10.8474M67.9722 176.412L248.895 -10.9388M73.2083 176.321L254.131 -11.0302M78.4444 176.229L259.367 -11.1216M83.6805 176.138L264.603 -11.213M88.9166 176.046L269.839 -11.3044M94.1527 175.955L275.075 -11.3958M99.3888 175.864L280.311 -11.4872M104.625 175.772L285.548 -11.5786M109.861 175.681L290.784 -11.6699M115.097 175.589L296.02 -11.7613M120.333 175.498L301.256 -11.8527M125.569 175.407L306.492 -11.9441M130.806 175.315L311.728 -12.0355M136.042 175.224L316.964 -12.1269M141.278 175.133L322.2 -12.2183M146.514 175.041L327.436 -12.3097M151.75 174.95L332.673 -12.4011M156.986 174.858L337.909 -12.4925M162.222 174.767L343.145 -12.5839M167.458 174.676L348.381 -12.6753M172.694 174.584L353.617 -12.7667M177.931 174.493L358.853 -12.8581M183.167 174.401L364.089 -12.9495M188.403 174.31L369.325 -13.0409M193.639 174.219L374.562 -13.1323M198.875 174.127L379.798 -13.2237M204.111 174.036L385.034 -13.3151M209.347 173.944L390.27 -13.4065M214.583 173.853L395.506 -13.4979M219.819 173.762L400.742 -13.5893M225.056 173.67L405.978 -13.6807M230.292 173.579L411.214 -13.7721M235.528 173.487L416.45 -13.8635M240.764 173.396L421.687 -13.9549M246 173.305L426.923 -14.0463M251.236 173.213L432.159 -14.1377M256.472 173.122L437.395 -14.2291" stroke="url(#paint2_linear_993_3064)" stroke-opacity="0.5" stroke-width="0.436409"/>
</g>
<rect x="64.9498" y="32.15" width="198.7" height="19.7" rx="1.85" stroke="#CBD5E1" stroke-width="0.3" stroke-dasharray="1.37 1.37"/>
<rect x="56.7998" y="60" width="215" height="0.5" fill="#CBD5E1" fill-opacity="0.32"/>
<g clip-path="url(#clip3_993_3064)">
<path d="M-94.3474 215.745L86.5752 28.3945M-89.1113 215.654L91.8113 28.3031M-83.8752 215.563L97.0474 28.2117M-78.6391 215.471L102.284 28.1203M-73.4029 215.38L107.52 28.0289M-68.1668 215.288L112.756 27.9375M-62.9307 215.197L117.992 27.8461M-57.6946 215.106L123.228 27.7547M-52.4585 215.014L128.464 27.6634M-47.2224 214.923L133.7 27.572M-41.9863 214.831L138.936 27.4806M-36.7501 214.74L144.172 27.3892M-31.514 214.649L149.409 27.2978M-26.2779 214.557L154.645 27.2064M-21.0418 214.466L159.881 27.115M-15.8057 214.374L165.117 27.0236M-10.5696 214.283L170.353 26.9322M-5.33344 214.192L175.589 26.8408M-0.0973381 214.1L180.825 26.7494M5.13878 214.009L186.061 26.658M10.3749 213.917L191.297 26.5666M15.611 213.826L196.534 26.4752M20.8471 213.735L201.77 26.3838M26.0832 213.643L207.006 26.2924M31.3194 213.552L212.242 26.201M36.5555 213.46L217.478 26.1096M41.7916 213.369L222.714 26.0182M47.0277 213.278L227.95 25.9268M52.2638 213.186L233.186 25.8354M57.4999 213.095L238.423 25.744M62.736 213.003L243.659 25.6526M67.9722 212.912L248.895 25.5612M73.2083 212.821L254.131 25.4698M78.4444 212.729L259.367 25.3784M83.6805 212.638L264.603 25.287M88.9166 212.546L269.839 25.1956M94.1527 212.455L275.075 25.1042M99.3888 212.364L280.311 25.0128M104.625 212.272L285.548 24.9214M109.861 212.181L290.784 24.8301M115.097 212.089L296.02 24.7387M120.333 211.998L301.256 24.6473M125.569 211.907L306.492 24.5559M130.806 211.815L311.728 24.4645M136.042 211.724L316.964 24.3731M141.278 211.633L322.2 24.2817M146.514 211.541L327.436 24.1903M151.75 211.45L332.673 24.0989M156.986 211.358L337.909 24.0075M162.222 211.267L343.145 23.9161M167.458 211.176L348.381 23.8247M172.694 211.084L353.617 23.7333M177.931 210.993L358.853 23.6419M183.167 210.901L364.089 23.5505M188.403 210.81L369.325 23.4591M193.639 210.719L374.562 23.3677M198.875 210.627L379.798 23.2763M204.111 210.536L385.034 23.1849M209.347 210.444L390.27 23.0935M214.583 210.353L395.506 23.0021M219.819 210.262L400.742 22.9107M225.056 210.17L405.978 22.8193M230.292 210.079L411.214 22.7279M235.528 209.987L416.45 22.6365M240.764 209.896L421.687 22.5451M246 209.805L426.923 22.4537M251.236 209.713L432.159 22.3623M256.472 209.622L437.395 22.2709" stroke="url(#paint3_linear_993_3064)" stroke-opacity="0.5" stroke-width="0.436409"/>
</g>
<rect x="64.9498" y="68.65" width="198.7" height="50.7" rx="1.85" stroke="url(#paint4_linear_993_3064)" stroke-width="0.3" stroke-dasharray="1.37 1.37"/>
<rect opacity="0.5" x="56.7998" y="127.5" width="215" height="0.5" fill="#CBD5E1" fill-opacity="0.32"/>
<g clip-path="url(#clip4_993_3064)">
<path d="M-94.3474 283.245L86.5752 95.8945M-89.1113 283.154L91.8113 95.8031M-83.8752 283.063L97.0474 95.7117M-78.6391 282.971L102.284 95.6203M-73.4029 282.88L107.52 95.5289M-68.1668 282.788L112.756 95.4375M-62.9307 282.697L117.992 95.3461M-57.6946 282.606L123.228 95.2547M-52.4585 282.514L128.464 95.1633M-47.2224 282.423L133.7 95.0719M-41.9863 282.331L138.936 94.9805M-36.7501 282.24L144.172 94.8891M-31.514 282.149L149.409 94.7977M-26.2779 282.057L154.645 94.7063M-21.0418 281.966L159.881 94.6149M-15.8057 281.874L165.117 94.5235M-10.5696 281.783L170.353 94.4321M-5.33344 281.692L175.589 94.3407M-0.0973381 281.6L180.825 94.2493M5.13878 281.509L186.061 94.1579M10.3749 281.417L191.297 94.0665M15.611 281.326L196.534 93.9751M20.8471 281.235L201.77 93.8837M26.0832 281.143L207.006 93.7923M31.3194 281.052L212.242 93.7009M36.5555 280.96L217.478 93.6095M41.7916 280.869L222.714 93.5181M47.0277 280.778L227.95 93.4268M52.2638 280.686L233.186 93.3354M57.4999 280.595L238.423 93.244M62.736 280.503L243.659 93.1526M67.9722 280.412L248.895 93.0612M73.2083 280.321L254.131 92.9698M78.4444 280.229L259.367 92.8784M83.6805 280.138L264.603 92.787M88.9166 280.046L269.839 92.6956M94.1527 279.955L275.075 92.6042M99.3888 279.864L280.311 92.5128M104.625 279.772L285.548 92.4214M109.861 279.681L290.784 92.33M115.097 279.589L296.02 92.2386M120.333 279.498L301.256 92.1472M125.569 279.407L306.492 92.0558M130.806 279.315L311.728 91.9644M136.042 279.224L316.964 91.873M141.278 279.132L322.2 91.7816M146.514 279.041L327.436 91.6902M151.75 278.95L332.673 91.5988M156.986 278.858L337.909 91.5074M162.222 278.767L343.145 91.416M167.458 278.675L348.381 91.3246M172.694 278.584L353.617 91.2332M177.931 278.493L358.853 91.1418M183.167 278.401L364.089 91.0504M188.403 278.31L369.325 90.959M193.639 278.218L374.562 90.8676M198.875 278.127L379.798 90.7762M204.111 278.036L385.034 90.6848M209.347 277.944L390.27 90.5935M214.583 277.853L395.506 90.5021M219.819 277.761L400.742 90.4107M225.056 277.67L405.978 90.3193M230.292 277.579L411.214 90.2279M235.528 277.487L416.45 90.1365M240.764 277.396L421.687 90.0451M246 277.305L426.923 89.9537M251.236 277.213L432.159 89.8623M256.472 277.122L437.395 89.7709" stroke="url(#paint5_linear_993_3064)" stroke-opacity="0.4" stroke-width="0.436409"/>
</g>
<rect x="64.9498" y="136.15" width="198.7" height="19.7" rx="1.85" stroke="url(#paint6_linear_993_3064)" stroke-opacity="0.7" stroke-width="0.3" stroke-dasharray="1.37 1.37"/>
</g>
<rect x="57.2998" y="24.5" width="214" height="139" rx="3.5" stroke="url(#paint7_linear_993_3064)" stroke-opacity="0.7"/>
</g>
<defs>
<linearGradient id="paint0_linear_993_3064" x1="164.5" y1="0" x2="164.5" y2="78.7086" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_993_3064" x1="164.5" y1="-1.02658e-07" x2="164.52" y2="117.577" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear_993_3064" x1="166.463" y1="23.2012" x2="166.491" y2="86.5041" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint3_linear_993_3064" x1="166.629" y1="90.8018" x2="166.425" y2="130.157" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint4_linear_993_3064" x1="164.3" y1="68.5" x2="164.3" y2="119.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0.16"/>
</linearGradient>
<linearGradient id="paint5_linear_993_3064" x1="166.463" y1="127.201" x2="166.491" y2="190.504" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint6_linear_993_3064" x1="164.3" y1="136" x2="164" y2="154.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint7_linear_993_3064" x1="164.3" y1="24" x2="164.3" y2="164" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip0_993_3064">
<rect width="329" height="173" fill="white"/>
</clipPath>
<clipPath id="clip1_993_3064">
<rect x="56.7998" y="24" width="215" height="140" rx="4" fill="white"/>
</clipPath>
<clipPath id="clip2_993_3064">
<rect x="64.7998" y="32" width="199" height="20" rx="2" fill="white"/>
</clipPath>
<clipPath id="clip3_993_3064">
<rect x="64.7998" y="68.5" width="199" height="51" rx="2" fill="white"/>
</clipPath>
<clipPath id="clip4_993_3064">
<rect x="64.7998" y="136" width="199" height="20" rx="2" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

65
docs/public/illustrations/navigation-dark.svg Normal file
View File

@@ -0,0 +1,65 @@
<svg width="329" height="173" viewBox="0 0 329 173" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_993_2485)">
<rect x="0.5" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_2485)" fill-opacity="0.5" stroke="url(#paint1_linear_993_2485)"/>
<rect x="36" y="24" width="256" height="112" rx="3" fill="url(#paint2_linear_993_2485)" fill-opacity="0.26"/>
<g clip-path="url(#clip1_993_2485)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M47.0499 33.5749C45.683 33.5749 44.5749 34.683 44.5749 36.0499C44.5749 37.4168 45.683 38.5249 47.0499 38.5249C47.7334 38.5249 48.3517 38.2482 48.8 37.8C49.2482 37.3517 49.5249 36.7334 49.5249 36.0499C49.5249 34.683 48.4168 33.5749 47.0499 33.5749ZM43.8999 36.0499C43.8999 34.3102 45.3102 32.8999 47.0499 32.8999C48.7896 32.8999 50.1999 34.3102 50.1999 36.0499C50.1999 36.798 49.9388 37.4856 49.5032 38.0259L51.001 39.5237C51.1328 39.6555 51.1328 39.8692 51.001 40.001C50.8692 40.1328 50.6555 40.1328 50.5237 40.001L49.0259 38.5032C48.4856 38.9388 47.798 39.1999 47.0499 39.1999C45.3102 39.1999 43.8999 37.7896 43.8999 36.0499Z" fill="#475569" fill-opacity="0.88"/>
</g>
<line x1="57.8506" y1="36.5369" x2="77.8506" y2="36.5369" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
<path d="M292 47.5H36V48.5H292V47.5Z" fill="#475569" fill-opacity="0.2" mask="url(#path-3-inside-1_993_2485)"/>
<line x1="57" y1="59" x2="102" y2="59" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
<rect x="279" y="56" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
<rect x="271" y="56" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
<path d="M49.3125 60.3438V59.3594C49.3125 59.0237 49.1792 58.7018 48.9418 58.4644C48.7045 58.2271 48.3825 58.0938 48.0469 58.0938H47.4844C47.3725 58.0938 47.2652 58.0493 47.1861 57.9702C47.1069 57.8911 47.0625 57.7838 47.0625 57.6719V57.1094C47.0625 56.7737 46.9292 56.4518 46.6918 56.2144C46.4545 55.9771 46.1325 55.8438 45.7969 55.8438H45.0938M46.5 59.2188V61.4688M47.625 60.3438H45.375M45.9375 55.8438H44.1094C43.8765 55.8438 43.6875 56.0328 43.6875 56.2656V62.7344C43.6875 62.9672 43.8765 63.1562 44.1094 63.1562H48.8906C49.1235 63.1562 49.3125 62.9672 49.3125 62.7344V59.2188C49.3125 58.3236 48.9569 57.4652 48.324 56.8323C47.691 56.1993 46.8326 55.8438 45.9375 55.8438Z" stroke="#475569" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="57" y1="72" x2="142" y2="72" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
<rect x="279" y="69" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
<rect x="271" y="69" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
<path d="M46.5 72.2061V74.4561M47.625 73.3311H45.375M46.8975 70.6348L46.1025 69.8398C46.0503 69.7875 45.9883 69.746 45.92 69.7177C45.8517 69.6894 45.7785 69.6748 45.7046 69.6748H43.6875C43.4637 69.6748 43.2491 69.7637 43.0909 69.9219C42.9326 70.0802 42.8438 70.2948 42.8438 70.5186V75.0186C42.8438 75.2423 42.9326 75.4569 43.0909 75.6152C43.2491 75.7734 43.4637 75.8623 43.6875 75.8623H49.3125C49.5363 75.8623 49.7509 75.7734 49.9091 75.6152C50.0674 75.4569 50.1562 75.2423 50.1562 75.0186V71.6436C50.1562 71.4198 50.0674 71.2052 49.9091 71.0469C49.7509 70.8887 49.5363 70.7998 49.3125 70.7998H47.2954C47.1462 70.7997 47.0029 70.7403 46.8975 70.6348Z" stroke="#475569" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="57" y1="85" x2="121" y2="85" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
<rect x="279" y="82" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
<rect x="271" y="82" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
<path d="M43.9688 84.0938H49.5938M43.4062 86.9062H49.0312M48.3563 81.8438L46.8938 89.1562M46.1062 81.8438L44.6438 89.1562" stroke="#475569" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="57" y1="98" x2="203" y2="98" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
<rect x="279" y="95" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
<rect x="271" y="95" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
<g clip-path="url(#clip2_993_2485)">
<path d="M45.588 95.125H43.9688C43.745 95.125 43.5304 95.2139 43.3721 95.3721C43.2139 95.5304 43.125 95.745 43.125 95.9688V97.588C43.125 97.8119 43.2139 98.0268 43.3721 98.1846L46.965 101.777C47.2271 102.04 47.6325 102.104 47.9426 101.901C48.7232 101.39 49.39 100.723 49.9012 99.9426C50.1045 99.6325 50.0396 99.2271 49.7775 98.965L46.185 95.3725C46.1066 95.294 46.0136 95.2318 45.9111 95.1893C45.8087 95.1469 45.6989 95.125 45.588 95.125Z" stroke="#475569" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M44.25 96.25H44.253V96.253H44.25V96.25Z" stroke="#475569" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g opacity="0.5">
<line x1="57" y1="111" x2="171" y2="111" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
<rect x="279" y="108" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
<rect x="271" y="108" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
<path d="M45.375 110.094H44.8125C44.5887 110.094 44.3741 110.183 44.2159 110.341C44.0576 110.499 43.9688 110.714 43.9688 110.938V114.312C43.9688 114.536 44.0576 114.751 44.2159 114.909C44.3741 115.067 44.5887 115.156 44.8125 115.156H48.1875C48.4113 115.156 48.6259 115.067 48.7841 114.909C48.9424 114.751 49.0312 114.536 49.0312 114.312V110.938C49.0312 110.714 48.9424 110.499 48.7841 110.341C48.6259 110.183 48.4113 110.094 48.1875 110.094H47.625M45.375 111.5L46.5 112.625M46.5 112.625L47.625 111.5M46.5 112.625V107.844" stroke="#475569" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g opacity="0.32">
<line x1="57" y1="124" x2="109" y2="124" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
<rect x="279" y="121" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
<rect x="271" y="121" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
<path d="M44.25 125.062V121.406M44.25 125.062C44.3992 125.062 44.5423 125.122 44.6477 125.227C44.7532 125.333 44.8125 125.476 44.8125 125.625C44.8125 125.774 44.7532 125.917 44.6477 126.023C44.5423 126.128 44.3992 126.188 44.25 126.188M44.25 125.062C44.1008 125.062 43.9577 125.122 43.8523 125.227C43.7468 125.333 43.6875 125.476 43.6875 125.625C43.6875 125.774 43.7468 125.917 43.8523 126.023C43.9577 126.128 44.1008 126.188 44.25 126.188M44.25 126.188V127.594M48.75 125.062V121.406M48.75 125.062C48.8992 125.062 49.0423 125.122 49.1477 125.227C49.2532 125.333 49.3125 125.476 49.3125 125.625C49.3125 125.774 49.2532 125.917 49.1477 126.023C49.0423 126.128 48.8992 126.188 48.75 126.188M48.75 125.062C48.6008 125.062 48.4577 125.122 48.3523 125.227C48.2468 125.333 48.1875 125.476 48.1875 125.625C48.1875 125.774 48.2468 125.917 48.3523 126.023C48.4577 126.128 48.6008 126.188 48.75 126.188M48.75 126.188V127.594M46.5 122.812V121.406M46.5 122.812C46.6492 122.812 46.7923 122.872 46.8977 122.977C47.0032 123.083 47.0625 123.226 47.0625 123.375C47.0625 123.524 47.0032 123.667 46.8977 123.773C46.7923 123.878 46.6492 123.938 46.5 123.938M46.5 122.812C46.3508 122.812 46.2077 122.872 46.1023 122.977C45.9968 123.083 45.9375 123.226 45.9375 123.375C45.9375 123.524 45.9968 123.667 46.1023 123.773C46.2077 123.878 46.3508 123.938 46.5 123.938M46.5 123.938V127.594" stroke="#475569" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
<defs>
<linearGradient id="paint0_linear_993_2485" x1="164.5" y1="0" x2="164.5" y2="78.7086" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_993_2485" x1="164.5" y1="-1.02658e-07" x2="164.52" y2="117.577" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear_993_2485" x1="164" y1="24" x2="164" y2="136" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip0_993_2485">
<rect width="329" height="173" fill="white"/>
</clipPath>
<clipPath id="clip1_993_2485">
<rect width="8.99998" height="8.99998" fill="white" transform="translate(43 32)"/>
</clipPath>
<clipPath id="clip2_993_2485">
<rect width="9" height="9" fill="white" transform="translate(42 94)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

65
docs/public/illustrations/navigation-light.svg Normal file
View File

@@ -0,0 +1,65 @@
<svg width="329" height="173" viewBox="0 0 329 173" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_993_3006)">
<rect x="0.5" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_3006)" fill-opacity="0.15" stroke="url(#paint1_linear_993_3006)"/>
<g clip-path="url(#clip1_993_3006)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M47.0499 33.575C45.683 33.575 44.5749 34.6831 44.5749 36.05C44.5749 37.4169 45.683 38.525 47.0499 38.525C47.7334 38.525 48.3517 38.2484 48.8 37.8001C49.2482 37.3518 49.5249 36.7336 49.5249 36.05C49.5249 34.6831 48.4168 33.575 47.0499 33.575ZM43.8999 36.05C43.8999 34.3103 45.3102 32.9 47.0499 32.9C48.7896 32.9 50.1999 34.3103 50.1999 36.05C50.1999 36.7982 49.9388 37.4858 49.5032 38.026L51.001 39.5239C51.1328 39.6557 51.1328 39.8694 51.001 40.0012C50.8692 40.133 50.6555 40.133 50.5237 40.0012L49.0259 38.5033C48.4856 38.9389 47.798 39.2 47.0499 39.2C45.3102 39.2 43.8999 37.7897 43.8999 36.05Z" fill="#CBD5E1" fill-opacity="0.88"/>
</g>
<line x1="57.8506" y1="36.5369" x2="77.8506" y2="36.5369" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
<path d="M292 47.5H36V48.5H292V47.5Z" fill="#CBD5E1" fill-opacity="0.32" mask="url(#path-4-inside-1_993_3006)"/>
<line x1="57" y1="59" x2="102" y2="59" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
<rect x="279" y="56" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
<rect x="271" y="56" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
<path d="M49.3125 60.3438V59.3594C49.3125 59.0237 49.1792 58.7018 48.9418 58.4644C48.7045 58.2271 48.3825 58.0938 48.0469 58.0938H47.4844C47.3725 58.0938 47.2652 58.0493 47.1861 57.9702C47.1069 57.8911 47.0625 57.7838 47.0625 57.6719V57.1094C47.0625 56.7737 46.9292 56.4518 46.6918 56.2144C46.4545 55.9771 46.1325 55.8438 45.7969 55.8438H45.0938M46.5 59.2188V61.4688M47.625 60.3438H45.375M45.9375 55.8438H44.1094C43.8765 55.8438 43.6875 56.0328 43.6875 56.2656V62.7344C43.6875 62.9672 43.8765 63.1562 44.1094 63.1562H48.8906C49.1235 63.1562 49.3125 62.9672 49.3125 62.7344V59.2188C49.3125 58.3236 48.9569 57.4652 48.324 56.8323C47.691 56.1993 46.8326 55.8438 45.9375 55.8438Z" stroke="#CBD5E1" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="57" y1="72" x2="142" y2="72" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
<rect x="279" y="69" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
<rect x="271" y="69" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
<path d="M46.5 72.2059V74.4559M47.625 73.3309H45.375M46.8975 70.6347L46.1025 69.8397C46.0503 69.7874 45.9883 69.7459 45.92 69.7176C45.8517 69.6893 45.7785 69.6747 45.7046 69.6747H43.6875C43.4637 69.6747 43.2491 69.7636 43.0909 69.9218C42.9326 70.08 42.8438 70.2947 42.8438 70.5184V75.0184C42.8438 75.2422 42.9326 75.4568 43.0909 75.6151C43.2491 75.7733 43.4637 75.8622 43.6875 75.8622H49.3125C49.5363 75.8622 49.7509 75.7733 49.9091 75.6151C50.0674 75.4568 50.1562 75.2422 50.1562 75.0184V71.6434C50.1562 71.4197 50.0674 71.205 49.9091 71.0468C49.7509 70.8886 49.5363 70.7997 49.3125 70.7997H47.2954C47.1462 70.7996 47.0029 70.7402 46.8975 70.6347Z" stroke="#CBD5E1" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="57" y1="85" x2="121" y2="85" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
<rect x="279" y="82" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
<rect x="271" y="82" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
<path d="M43.9688 84.0938H49.5938M43.4062 86.9062H49.0312M48.3563 81.8438L46.8938 89.1562M46.1062 81.8438L44.6438 89.1562" stroke="#CBD5E1" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="57" y1="98" x2="203" y2="98" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
<rect x="279" y="95" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
<rect x="271" y="95" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
<g clip-path="url(#clip2_993_3006)">
<path d="M45.588 95.125H43.9688C43.745 95.125 43.5304 95.2139 43.3721 95.3721C43.2139 95.5304 43.125 95.745 43.125 95.9688V97.588C43.125 97.8119 43.2139 98.0268 43.3721 98.1846L46.965 101.777C47.2271 102.04 47.6325 102.104 47.9426 101.901C48.7232 101.39 49.39 100.723 49.9012 99.9426C50.1045 99.6325 50.0396 99.2271 49.7775 98.965L46.185 95.3725C46.1066 95.294 46.0136 95.2318 45.9111 95.1893C45.8087 95.1469 45.6989 95.125 45.588 95.125Z" stroke="#CBD5E1" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M44.25 96.25H44.253V96.253H44.25V96.25Z" stroke="#CBD5E1" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g opacity="0.5">
<line x1="57" y1="111" x2="171" y2="111" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
<rect x="279" y="108" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
<rect x="271" y="108" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
<path d="M45.375 110.094H44.8125C44.5887 110.094 44.3741 110.183 44.2159 110.341C44.0576 110.499 43.9688 110.714 43.9688 110.938V114.312C43.9688 114.536 44.0576 114.751 44.2159 114.909C44.3741 115.067 44.5887 115.156 44.8125 115.156H48.1875C48.4113 115.156 48.6259 115.067 48.7841 114.909C48.9424 114.751 49.0312 114.536 49.0312 114.312V110.938C49.0312 110.714 48.9424 110.499 48.7841 110.341C48.6259 110.183 48.4113 110.094 48.1875 110.094H47.625M45.375 111.5L46.5 112.625M46.5 112.625L47.625 111.5M46.5 112.625V107.844" stroke="#CBD5E1" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g opacity="0.32">
<line x1="57" y1="124" x2="109" y2="124" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
<rect x="279" y="121" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
<rect x="271" y="121" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
<path d="M44.25 125.062V121.406M44.25 125.062C44.3992 125.062 44.5423 125.122 44.6477 125.227C44.7532 125.333 44.8125 125.476 44.8125 125.625C44.8125 125.774 44.7532 125.917 44.6477 126.023C44.5423 126.128 44.3992 126.188 44.25 126.188M44.25 125.062C44.1008 125.062 43.9577 125.122 43.8523 125.227C43.7468 125.333 43.6875 125.476 43.6875 125.625C43.6875 125.774 43.7468 125.917 43.8523 126.023C43.9577 126.128 44.1008 126.188 44.25 126.188M44.25 126.188V127.594M48.75 125.062V121.406M48.75 125.062C48.8992 125.062 49.0423 125.122 49.1477 125.227C49.2532 125.333 49.3125 125.476 49.3125 125.625C49.3125 125.774 49.2532 125.917 49.1477 126.023C49.0423 126.128 48.8992 126.188 48.75 126.188M48.75 125.062C48.6008 125.062 48.4577 125.122 48.3523 125.227C48.2468 125.333 48.1875 125.476 48.1875 125.625C48.1875 125.774 48.2468 125.917 48.3523 126.023C48.4577 126.128 48.6008 126.188 48.75 126.188M48.75 126.188V127.594M46.5 122.812V121.406M46.5 122.812C46.6492 122.812 46.7923 122.872 46.8977 122.977C47.0032 123.083 47.0625 123.226 47.0625 123.375C47.0625 123.524 47.0032 123.667 46.8977 123.773C46.7923 123.878 46.6492 123.938 46.5 123.938M46.5 122.812C46.3508 122.812 46.2077 122.872 46.1023 122.977C45.9968 123.083 45.9375 123.226 45.9375 123.375C45.9375 123.524 45.9968 123.667 46.1023 123.773C46.2077 123.878 46.3508 123.938 46.5 123.938M46.5 123.938V127.594" stroke="#CBD5E1" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<rect x="36.5" y="24.5" width="255" height="111" rx="2.5" stroke="url(#paint2_linear_993_3006)" stroke-opacity="0.7"/>
</g>
<defs>
<linearGradient id="paint0_linear_993_3006" x1="164.5" y1="0" x2="164.5" y2="78.7086" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_993_3006" x1="164.5" y1="-1.02658e-07" x2="164.52" y2="117.577" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear_993_3006" x1="164" y1="24" x2="164" y2="136" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip0_993_3006">
<rect width="329" height="173" fill="white"/>
</clipPath>
<clipPath id="clip1_993_3006">
<rect width="8.99998" height="8.99998" fill="white" transform="translate(43 32)"/>
</clipPath>
<clipPath id="clip2_993_3006">
<rect width="9" height="9" fill="white" transform="translate(42 94)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

33
docs/public/illustrations/overlays-dark.svg Normal file
View File

@@ -0,0 +1,33 @@
<svg width="330" height="173" viewBox="0 0 330 173" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_993_2599)">
<rect x="1" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_2599)" fill-opacity="0.5" stroke="url(#paint1_linear_993_2599)"/>
<g clip-path="url(#clip1_993_2599)">
<path d="M-343.757 284.451L84.4375 -57.6226M-331.414 284.236L96.7796 -57.838M-319.072 284.021L109.122 -58.0534M-306.73 283.805L121.464 -58.2689M-294.388 283.59L133.806 -58.4843M-282.046 283.374L146.148 -58.6997M-269.704 283.159L158.49 -58.9152M-257.361 282.943L170.833 -59.1306M-245.019 282.728L183.175 -59.346M-232.677 282.513L195.517 -59.5615M-220.335 282.297L207.859 -59.7769M-207.993 282.082L220.201 -59.9923M-195.651 281.866L232.543 -60.2078M-183.308 281.651L244.886 -60.4232M-170.966 281.435L257.228 -60.6386M-158.624 281.22L269.57 -60.8541M-146.282 281.004L281.912 -61.0695M-133.94 280.789L294.254 -61.2849M-121.598 280.574L306.596 -61.5004M-109.255 280.358L318.939 -61.7158M-96.9133 280.143L331.281 -61.9312M-84.5711 279.927L343.623 -62.1467M-72.229 279.712L355.965 -62.3621M-59.8868 279.496L368.307 -62.5775M-47.5447 279.281L380.649 -62.793M-35.2025 279.066L392.992 -63.0084M-22.8603 278.85L405.334 -63.2238M-10.5182 278.635L417.676 -63.4393M1.82397 278.419L430.018 -63.6547M14.1661 278.204L442.36 -63.8701M26.5083 277.988L454.702 -64.0856M38.8505 277.773L467.044 -64.301M51.1926 277.558L479.387 -64.5164M63.5348 277.342L491.729 -64.7319M75.8769 277.127L504.071 -64.9473M88.2191 276.911L516.413 -65.1627M100.561 276.696L528.755 -65.3782M112.903 276.48L541.097 -65.5936M125.246 276.265L553.44 -65.809M137.588 276.05L565.782 -66.0245M149.93 275.834L578.124 -66.2399M162.272 275.619L590.466 -66.4553M174.614 275.403L602.808 -66.6708M186.956 275.188L615.15 -66.8862M199.299 274.972L627.493 -67.1016M211.641 274.757L639.835 -67.3171M223.983 274.541L652.177 -67.5325M236.325 274.326L664.519 -67.7479M248.667 274.111L676.861 -67.9634M261.009 273.895L689.203 -68.1788M273.352 273.68L701.546 -68.3942M285.694 273.464L713.888 -68.6097M298.036 273.249L726.23 -68.8251M310.378 273.033L738.572 -69.0405M322.72 272.818L750.914 -69.256M335.062 272.603L763.256 -69.4714M347.404 272.387L775.598 -69.6868M359.747 272.172L787.941 -69.9023M372.089 271.956L800.283 -70.1177M384.431 271.741L812.625 -70.3331M396.773 271.525L824.967 -70.5486M409.115 271.31L837.309 -70.764M421.457 271.095L849.651 -70.9794M433.8 270.879L861.994 -71.1949M446.142 270.664L874.336 -71.4103M458.484 270.448L886.678 -71.6257M470.826 270.233L899.02 -71.8412M483.168 270.017L911.362 -72.0566" stroke="url(#paint2_linear_993_2599)" stroke-opacity="0.32" stroke-width="0.721516"/>
</g>
<rect x="32.9331" y="24.5" width="263" height="124" rx="3.5" stroke="url(#paint3_linear_993_2599)" stroke-opacity="0.7" stroke-dasharray="2.26 2.26"/>
</g>
<defs>
<linearGradient id="paint0_linear_993_2599" x1="165" y1="0" x2="165" y2="78.7086" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_993_2599" x1="165" y1="-1.02658e-07" x2="165.02" y2="117.577" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear_993_2599" x1="272.533" y1="55" x2="272.533" y2="126.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint3_linear_993_2599" x1="164.433" y1="24" x2="164.433" y2="149" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip0_993_2599">
<rect width="329" height="173" fill="white" transform="translate(0.5)"/>
</clipPath>
<clipPath id="clip1_993_2599">
<rect x="32.4331" y="24" width="264" height="125" rx="4" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

33
docs/public/illustrations/overlays-light.svg Normal file
View File

@@ -0,0 +1,33 @@
<svg width="330" height="173" viewBox="0 0 330 173" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_993_3056)">
<rect x="1" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_3056)" fill-opacity="0.15" stroke="url(#paint1_linear_993_3056)"/>
<g clip-path="url(#clip1_993_3056)">
<path d="M-343.757 284.451L84.4375 -57.6226M-331.414 284.236L96.7796 -57.838M-319.072 284.021L109.122 -58.0534M-306.73 283.805L121.464 -58.2689M-294.388 283.59L133.806 -58.4843M-282.046 283.374L146.148 -58.6997M-269.704 283.159L158.49 -58.9152M-257.361 282.943L170.833 -59.1306M-245.019 282.728L183.175 -59.346M-232.677 282.513L195.517 -59.5615M-220.335 282.297L207.859 -59.7769M-207.993 282.082L220.201 -59.9923M-195.651 281.866L232.543 -60.2078M-183.308 281.651L244.886 -60.4232M-170.966 281.435L257.228 -60.6386M-158.624 281.22L269.57 -60.8541M-146.282 281.004L281.912 -61.0695M-133.94 280.789L294.254 -61.2849M-121.598 280.574L306.596 -61.5004M-109.255 280.358L318.939 -61.7158M-96.9133 280.143L331.281 -61.9312M-84.5711 279.927L343.623 -62.1467M-72.229 279.712L355.965 -62.3621M-59.8868 279.496L368.307 -62.5775M-47.5447 279.281L380.649 -62.793M-35.2025 279.066L392.992 -63.0084M-22.8603 278.85L405.334 -63.2238M-10.5182 278.635L417.676 -63.4393M1.82397 278.419L430.018 -63.6547M14.1661 278.204L442.36 -63.8701M26.5083 277.988L454.702 -64.0856M38.8505 277.773L467.044 -64.301M51.1926 277.558L479.387 -64.5164M63.5348 277.342L491.729 -64.7319M75.8769 277.127L504.071 -64.9473M88.2191 276.911L516.413 -65.1627M100.561 276.696L528.755 -65.3782M112.903 276.48L541.097 -65.5936M125.246 276.265L553.44 -65.809M137.588 276.05L565.782 -66.0245M149.93 275.834L578.124 -66.2399M162.272 275.619L590.466 -66.4553M174.614 275.403L602.808 -66.6708M186.956 275.188L615.15 -66.8862M199.299 274.972L627.493 -67.1016M211.641 274.757L639.835 -67.3171M223.983 274.541L652.177 -67.5325M236.325 274.326L664.519 -67.7479M248.667 274.111L676.861 -67.9634M261.009 273.895L689.203 -68.1788M273.352 273.68L701.546 -68.3942M285.694 273.464L713.888 -68.6097M298.036 273.249L726.23 -68.8251M310.378 273.033L738.572 -69.0405M322.72 272.818L750.914 -69.256M335.062 272.603L763.256 -69.4714M347.404 272.387L775.598 -69.6868M359.747 272.172L787.941 -69.9023M372.089 271.956L800.283 -70.1177M384.431 271.741L812.625 -70.3331M396.773 271.525L824.967 -70.5486M409.115 271.31L837.309 -70.764M421.457 271.095L849.651 -70.9794M433.8 270.879L861.994 -71.1949M446.142 270.664L874.336 -71.4103M458.484 270.448L886.678 -71.6257M470.826 270.233L899.02 -71.8412M483.168 270.017L911.362 -72.0566" stroke="url(#paint2_linear_993_3056)" stroke-opacity="0.45" stroke-width="0.721516"/>
</g>
<rect x="32.9331" y="24.5" width="263" height="124" rx="3.5" stroke="url(#paint3_linear_993_3056)" stroke-opacity="0.8" stroke-dasharray="2.26 2.26"/>
</g>
<defs>
<linearGradient id="paint0_linear_993_3056" x1="165" y1="0" x2="165" y2="78.7086" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_993_3056" x1="165" y1="-1.02658e-07" x2="165.02" y2="117.577" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear_993_3056" x1="272.533" y1="55" x2="272.533" y2="126.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint3_linear_993_3056" x1="164.433" y1="24" x2="164.433" y2="149" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBD5E1"/>
<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip0_993_3056">
<rect width="329" height="173" fill="white" transform="translate(0.5)"/>
</clipPath>
<clipPath id="clip1_993_3056">
<rect x="32.4331" y="24" width="264" height="125" rx="4" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
docs/public/social-card.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 311 KiB

BIN
docs/public/social-preview.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 274 KiB