LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

developers page

This commit is contained in:
Karol Wypchlo 2021-03-28 18:34:52 +02:00
parent ac43c5b28b
commit 6cdc3a68ca
15 changed files with 473 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
packages/website/src/components/Icons/DataSwap.svg Normal file
View File

@ -0,0 +1,50 @@
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
<g fill="none" fill-rule="evenodd">
<polyline fill="#00C65E" points="46 36 46 59 71 59 71 36"/>
<g stroke="#222829" stroke-width="2" transform="translate(9 13)">
<path d="M53.9997,9 L53.9997,3 C53.9997,1.343 52.6557,0 50.9997,0 L2.9997,0 C1.3437,0 -0.0003,1.343 -0.0003,3 L-0.0003,41 C-0.0003,42.657 1.3437,44 2.9997,44 L34.9997,44"/>
<line x1="32" x2="32" y1="44" y2="54"/>
<line x1="22" x2="22" y1="54" y2="44"/>
<line x1="19" x2="35" y1="54" y2="54"/>
<line x2="35" y1="36" y2="36"/>
<line x1="26" x2="28" y1="40" y2="40"/>
<path d="M37.9997,17 L37.9997,14 C37.9997,12.896 38.8957,12 39.9997,12 L59.9997,12 C61.1037,12 61.9997,12.896 61.9997,14 L61.9997,52 C61.9997,53.104 61.1037,54 59.9997,54 L39.9997,54 C38.8957,54 37.9997,53.104 37.9997,52 L37.9997,27"/>
<line x1="52" x2="48" y1="50" y2="50"/>
<line x1="53" x2="31" y1="24" y2="24"/>
<line x1="43" x2="24" y1="20" y2="20"/>
<polyline stroke-linecap="round" points="27 23 24 20 27 17"/>
<line x1="53" x2="50" y1="24" y2="21" stroke-linecap="round"/>
<line x1="53" x2="50" y1="24" y2="27" stroke-linecap="round"/>
<line x1="38" x2="62" y1="46" y2="46"/>
<polyline points="4 33 4 4 51 4"/>
<line x1="7" x2="9" y1="12" y2="12"/>
<line x1="11" x2="13" y1="12" y2="12"/>
<line x1="15" x2="17" y1="12" y2="12"/>
<line x1="7" x2="9" y1="16" y2="16"/>
<line x1="11" x2="13" y1="16" y2="16"/>
<line x1="15" x2="17" y1="16" y2="16"/>
<line x1="7" x2="9" y1="20" y2="20"/>
<line x1="11" x2="13" y1="20" y2="20"/>
<line x1="19" x2="21" y1="12" y2="12"/>
<line x1="7" x2="9" y1="8" y2="8"/>
<line x1="11" x2="13" y1="8" y2="8"/>
<line x1="15" x2="17" y1="8" y2="8"/>
<line x1="19" x2="21" y1="8" y2="8"/>
<line x1="23" x2="25" y1="12" y2="12"/>
<line x1="23" x2="25" y1="8" y2="8"/>
<line x1="53" x2="55" y1="38" y2="38"/>
<line x1="57" x2="59" y1="38" y2="38"/>
<line x1="53" x2="55" y1="34" y2="34"/>
<line x1="57" x2="59" y1="34" y2="34"/>
<line x1="49" x2="51" y1="34" y2="34"/>
<line x1="41" x2="43" y1="38" y2="38"/>
<line x1="45" x2="47" y1="38" y2="38"/>
<line x1="49" x2="51" y1="38" y2="38"/>
<line x1="53" x2="55" y1="42" y2="42"/>
<line x1="57" x2="59" y1="42" y2="42"/>
<line x1="41" x2="43" y1="42" y2="42"/>
<line x1="45" x2="47" y1="42" y2="42"/>
<line x1="49" x2="51" y1="42" y2="42"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

45
packages/website/src/components/Icons/DevBig.svg Normal file
View File

@ -0,0 +1,45 @@
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="142" viewBox="0 0 320 142">
<defs>
<filter id="dev-a">
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 1.000000 0"/>
</filter>
<filter id="dev-b">
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 1.000000 0"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd">
<rect width="96" height="48" x="158" y="57" fill="#00C65E" rx="4"/>
<g filter="url(#dev-a)">
<g transform="translate(96 13)">
<path stroke="#0D0D0D" stroke-width="2" d="M135.724609,44 L154,44 C156.209139,44 158,45.790861 158,48 L158,88 C158,90.209139 156.209139,92 154,92 L110,92 L110,92"/>
<g stroke="#0D0D0D" stroke-width="2" transform="translate(0 20)">
<rect width="126" height="78" x="1" y="13"/>
<path d="M24.3242188,1 L34.4384766,1 L123,1 C125.209139,1 127,2.790861 127,5 L127,13 L127,13 L1,13" transform="matrix(-1 0 0 1 128 0)"/>
<line x1="14" x2="18" y1="7" y2="7"/>
<line x1="6" x2="10" y1="7" y2="7"/>
<line x1="22" x2="26" y1="7" y2="7"/>
</g>
<line x1="40" x2="96" y1="125" y2="125" stroke="#0D0D0D" stroke-width="2"/>
<rect width="48" height="2" x="18" y="66" fill="#0D0D0D"/>
<rect width="16" height="2" x="70" y="66" fill="#0D0D0D"/>
<rect width="4" height="2" x="90" y="66" fill="#0D0D0D"/>
<rect width="24" height="2" x="18" y="96" fill="#0D0D0D"/>
<rect width="24" height="2" x="46" y="96" fill="#0D0D0D"/>
<rect width="4" height="2" x="74" y="96" fill="#0D0D0D"/>
<rect width="64" height="2" x="10" y="56" fill="#0D0D0D"/>
<rect width="4" height="2" x="10" y="46" fill="#0D0D0D"/>
<rect width="16" height="2" x="10" y="86" fill="#0D0D0D"/>
<rect width="20" height="2" x="78" y="56" fill="#0D0D0D"/>
<rect width="32" height="2" x="18" y="76" fill="#0D0D0D"/>
<rect width="24" height="2" x="54" y="76" fill="#0D0D0D"/>
<g filter="url(#dev-b)">
<g transform="translate(117)">
<polyline stroke="#222829" stroke-width="2" points="5.414 14.486 .414 9.486 5.414 4.486"/>
<polyline stroke="#222829" stroke-width="2" points="19.414 4.486 24.414 9.486 19.414 14.486"/>
<line x1="7.414" x2="17.414" y1="18.486" y2=".486" stroke="#222829" stroke-width="2"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

41
packages/website/src/components/Icons/Encryption.svg Normal file
View File

@ -0,0 +1,41 @@
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
<g fill="none" fill-rule="evenodd">
<polygon fill="#00C65E" points="21 11 21 37 42 37 42 11"/>
<g stroke="#222829" stroke-linejoin="round" stroke-width="2" transform="translate(13 10)">
<polyline points="29 27 8 27 8 1 46 1 46 16"/>
<line x1="12" x2="12" y1="12" y2="14"/>
<line x1="12" x2="12" y1="8" y2="10"/>
<line x1="16" x2="16" y1="6" y2="14"/>
<line x1="20" x2="20" y1="12" y2="14"/>
<line x1="24" x2="24" y1="6" y2="14"/>
<line x1="30" x2="30" y1="6" y2="14"/>
<line x1="34" x2="34" y1="6" y2="8"/>
<line x1="38" x2="38" y1="6" y2="8"/>
<line x1="34" x2="34" y1="10" y2="12"/>
<line x1="38" x2="38" y1="12" y2="16"/>
<line x1="42" x2="42" y1="6" y2="14"/>
<line x1="34" x2="34" y1="14" y2="20"/>
<line x1="12" x2="12" y1="16" y2="24"/>
<line x1="16" x2="16" y1="22" y2="24"/>
<line x1="26" x2="26" y1="22" y2="24"/>
<line x1="30" x2="30" y1="20" y2="22"/>
<line x1="30" x2="30" y1="16" y2="18"/>
<line x1="16" x2="16" y1="16" y2="18"/>
<line x1="22" x2="22" y1="16" y2="24"/>
<g transform="translate(0 .5)">
<line x1="50" x2="50" y1="3.5" y2=".5"/>
<line x1="4" x2="4" y1="3.5" y2=".5"/>
<path d="M50.4997,29.5 C50.4997,33.918 46.9187,37.5 42.4997,37.5 C38.0817,37.5 34.4997,33.918 34.4997,29.5 C34.4997,25.082 38.0817,21.5 42.4997,21.5 C46.9187,21.5 50.4997,25.082 50.4997,29.5 Z"/>
<line x1="7" x2="21" y1="40.5" y2="40.5"/>
<line x1="7" x2="31" y1="44.5" y2="44.5"/>
<line x1="7" x2="31" y1="48.5" y2="48.5"/>
<polyline points="35 56.5 0 56.5 0 16.5"/>
<line x1="45" x2="51" y1="56.5" y2="56.5"/>
<line x1="45" x2="47.667" y1="52.5" y2="52.5"/>
<line x1="45" x2="49" y1="48.5" y2="48.5"/>
<polyline points="54 17.5 54 .5 0 .5 0 12.5"/>
<polyline points="44.5 38 44.5 60 40.5 60 40.5 38"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

3
packages/website/src/components/Icons/ExternalLink.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<path fill-rule="evenodd" d="M15,9 L15,11 L9,11 C8.48716416,11 8.06449284,11.3860402 8.00672773,11.8833789 L8,12 L8,23 C8,23.5128358 8.38604019,23.9355072 8.88337887,23.9932723 L9,24 L20,24 C20.5128358,24 20.9355072,23.6139598 20.9932723,23.1166211 L21,23 L21,17 L23,17 L23,23 C23,24.5976809 21.75108,25.9036609 20.1762728,25.9949073 L20,26 L9,26 C7.40231912,26 6.09633912,24.75108 6.00509269,23.1762728 L6,23 L6,12 C6,10.4023191 7.24891996,9.09633912 8.82372721,9.00509269 L9,9 L15,9 Z M25.1090164,5.97448598 C25.6186634,5.97237947 26.0408675,6.35190694 26.1047818,6.84456297 L26.1131393,6.96992843 L26.1454529,14.0733099 L24.1454736,14.0824079 L24.123,9.28947725 L17.4644661,15.9497475 L16.0502525,14.5355339 L22.599,7.98547725 L18.0817626,8.00354859 L18.0734961,6.00356568 L25.1090164,5.97448598 Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 897 B

20
packages/website/src/components/Icons/Layers.svg Normal file
View File

@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
<g fill="none" fill-rule="evenodd">
<polygon fill="#00C65E" points="40 29 23.211 40 40 51 57.229 40"/>
<g stroke="#222829" stroke-linejoin="round" stroke-width="2" transform="translate(9 11)">
<polygon points="31 58 0 38 31 18 62 38"/>
<polygon points="31 49 0 29 31 9 62 29"/>
<polygon points="31 40 0 20 31 0 62 20"/>
<line x1="30" x2="32" y1="27" y2="27"/>
<line x1="30" x2="32" y1="23" y2="23"/>
<line x1="30" x2="32" y1="31" y2="31"/>
<line x1="34" x2="36" y1="27" y2="27"/>
<line x1="38" x2="40" y1="29" y2="29"/>
<line x1="22" x2="24" y1="29" y2="29"/>
<line x1="34" x2="36" y1="31" y2="31"/>
<line x1="26" x2="28" y1="27" y2="27"/>
<line x1="26" x2="28" y1="31" y2="31"/>
<line x1="30" x2="32" y1="35" y2="35"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 915 B

42
packages/website/src/components/Icons/Mesh.svg Normal file
View File

@ -0,0 +1,42 @@
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
<defs>
<filter id="4-a">
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 1.000000 0"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd">
<polygon fill="#00C65E" points="24.5 49.5 18 52.626 17.5 55.378 18 57 22.59 62.588 25 62.588 27 63 28 64.116 29 66 34.999 67 37 68 37.826 65.601 40 64.67 39.515 59.5 39.515 57 37 56 37 54 35.676 53 30.677 49.919 29 49.5 28 50.59 25 50.59"/>
<g filter="url(#4-a)">
<g transform="translate(9 9)">
<line x1="59" x2="57" y1="34" y2="42" stroke="#222829" stroke-width="2"/>
<line x1="31" x2="31" y1="48" y2="56" stroke="#222829" stroke-width="2"/>
<g stroke="#222829" stroke-width="2">
<path d="M34 31C34 32.656 32.656 34 31 34 29.344 34 28 32.656 28 31 28 29.344 29.344 28 31 28 32.656 28 34 29.344 34 31zM34 17C34 18.656 32.656 20 31 20 29.344 20 28 18.656 28 17 28 15.344 29.344 14 31 14 32.656 14 34 15.344 34 17zM34 3C34 4.656 32.656 6 31 6 29.344 6 28 4.656 28 3 28 1.344 29.344 0 31 0 32.656 0 34 1.344 34 3zM34 45C34 46.656 32.656 48 31 48 29.344 48 28 46.656 28 45 28 43.344 29.344 42 31 42 32.656 42 34 43.344 34 45zM34 59C34 60.656 32.656 62 31 62 29.344 62 28 60.656 28 59 28 57.344 29.344 56 31 56 32.656 56 34 57.344 34 59zM21 23C21 24.656 19.656 26 18 26 16.344 26 15 24.656 15 23 15 21.344 16.344 20 18 20 19.656 20 21 21.344 21 23zM47 23C47 24.656 45.656 26 44 26 42.344 26 41 24.656 41 23 41 21.344 42.344 20 44 20 45.656 20 47 21.344 47 23zM59 45C59 43.344 57.656 42 56 42 54.344 42 53 43.344 53 45 53 46.656 54.344 48 56 48 57.656 48 59 46.656 59 45zM49 56C49 54.344 47.656 53 46 53 44.344 53 43 54.344 43 56 43 57.656 44.344 59 46 59 47.656 59 49 57.656 49 56zM21 39C21 40.656 19.656 42 18 42 16.344 42 15 40.656 15 39 15 37.344 16.344 36 18 36 19.656 36 21 37.344 21 39zM47 39C47 40.656 45.656 42 44 42 42.344 42 41 40.656 41 39 41 37.344 42.344 36 44 36 45.656 36 47 37.344 47 39z"/>
<line x1="20" x2="22" y1="14" y2="14"/>
<line x1="20" x2="22" y1="48" y2="48"/>
<line x1="49" x2="51" y1="31" y2="31"/>
<line x1="48" x2="54" y1="54" y2="47"/>
<line x1="43" x2="34" y1="5" y2="3"/>
<path d="M59 17C59 18.656 57.656 20 56 20 54.344 20 53 18.656 53 17 53 15.344 54.344 14 56 14 57.656 14 59 15.344 59 17zM49 6C49 7.656 47.656 9 46 9 44.344 9 43 7.656 43 6 43 4.344 44.344 3 46 3 47.656 3 49 4.344 49 6zM62 31C62 29.344 60.656 28 59 28 57.344 28 56 29.344 56 31 56 32.656 57.344 34 59 34 60.656 34 62 32.656 62 31z"/>
<line x1="48" x2="54" y1="8" y2="15"/>
<line x1="19" x2="28" y1="57" y2="59"/>
<path d="M3 45C3 43.344 4.344 42 6 42 7.656 42 9 43.344 9 45 9 46.656 7.656 48 6 48 4.344 48 3 46.656 3 45zM13 56C13 54.344 14.344 53 16 53 17.656 53 19 54.344 19 56 19 57.656 17.656 59 16 59 14.344 59 13 57.656 13 56z"/>
<line x1="14" x2="8" y1="54" y2="47"/>
<line x1="3" x2="5" y1="28" y2="20"/>
<path d="M3 17C3 18.656 4.344 20 6 20 7.656 20 9 18.656 9 17 9 15.344 7.656 14 6 14 4.344 14 3 15.344 3 17zM13 6C13 7.656 14.344 9 16 9 17.656 9 19 7.656 19 6 19 4.344 17.656 3 16 3 14.344 3 13 4.344 13 6zM0 31C0 29.344 1.344 28 3 28 4.656 28 6 29.344 6 31 6 32.656 4.656 34 3 34 1.344 34 0 32.656 0 31z"/>
<line x1="14" x2="8" y1="8" y2="15"/>
<line x1="28" x2="20.5" y1="45" y2="40.5"/>
<line x1="18" x2="18" y1="36" y2="26"/>
<line x1="20.5" x2="28" y1="24.5" y2="30"/>
<line x1="31" x2="31" y1="14" y2="6"/>
<line x1="34" x2="41.5" y1="18" y2="21"/>
<line x1="34" x2="41.5" y1="45" y2="40.5"/>
<line x1="46.5" x2="53" y1="40.5" y2="44"/>
<line x1="15.5" x2="9" y1="40.5" y2="44"/>
<line x1="44" x2="44" y1="26" y2="36"/>
<line x1="15" x2="8.5" y1="22" y2="18.5"/>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

61
packages/website/src/components/Icons/Toolkit.svg Normal file
View File

@ -0,0 +1,61 @@
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
<defs>
<filter id="5-a">
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 1.000000 0"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd">
<rect width="23" height="26" x="10" y="34" fill="#00C65E"/>
<g filter="url(#5-a)">
<g transform="translate(9 11)">
<g stroke="#222829" stroke-linejoin="round" stroke-width="2" transform="translate(30)">
<polyline points="12 59 12 8 20 8 20 59"/>
<polygon points="29 8 7 8 0 5 0 3 7 0 29 0"/>
</g>
<line x1="51" x2="41" y1="13" y2="13" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<polyline stroke="#222829" stroke-width="2" points="53 23 63 23 63 49 1 49 1 23 27 23"/>
<line x1="5" x2="7" y1="29" y2="29" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="13" x2="15" y1="29" y2="29" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="17" x2="19" y1="29" y2="29" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="21" x2="23" y1="29" y2="29" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="25" x2="27" y1="29" y2="29" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="33" x2="35" y1="29" y2="29" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="45" x2="47" y1="29" y2="29" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="53" x2="55" y1="29" y2="29" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="57" x2="59" y1="29" y2="29" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="5" x2="9" y1="34" y2="34" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="15" x2="17" y1="34" y2="34" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="11" x2="13" y1="34" y2="34" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="19" x2="21" y1="34" y2="34" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="23" x2="25" y1="34" y2="34" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="53" x2="59" y1="34" y2="34" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="5" x2="11" y1="38" y2="38" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="17" x2="19" y1="38" y2="38" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="13" x2="15" y1="38" y2="38" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="21" x2="23" y1="38" y2="38" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="25" x2="27" y1="38" y2="38" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="45" x2="47" y1="38" y2="38" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="45" x2="47" y1="34" y2="34" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="53" x2="55" y1="38" y2="38" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="57" x2="59" y1="38" y2="38" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="20" x2="42" y1="43" y2="43" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="18" x2="16" y1="43" y2="43" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="14" x2="10" y1="43" y2="43" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="55" x2="53" y1="43" y2="43" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="50" x2="45" y1="43" y2="43" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<g stroke="#222829" stroke-linejoin="round" stroke-width="2" transform="translate(2 7)">
<line x2="8" y1="1" y2="1"/>
<line x2="6" y1="9" y2="9"/>
</g>
<line x1="12" x2="20" y1="8" y2="8" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="22" x2="24" y1="8" y2="8" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="2" x2="6" y1="12" y2="12" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="8" x2="14" y1="12" y2="12" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="16" x2="18" y1="12" y2="12" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<line x1="6" y1="4" y2="4" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
<polygon stroke="#222829" stroke-linejoin="round" stroke-width="2" points="38 38 30 38 30 36 32 34 30 32 30 19 32 17 30 15 30 13 38 13 38 15 36 17 38 19 38 32 36 34 38 36"/>
<line x1="34" x2="34" y1="38" y2="59" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

7
packages/website/src/components/Icons/index.js
View File

@ -6,20 +6,26 @@ export { default as CheckCircle } from "./CheckCircle.svg";
export { default as Cloud } from "./Cloud.svg"; export { default as Cloud } from "./Cloud.svg";
export { default as Cogs } from "./Cogs.svg"; export { default as Cogs } from "./Cogs.svg";
export { default as ComputerScreen } from "./ComputerScreen.svg"; export { default as ComputerScreen } from "./ComputerScreen.svg";
export { default as DataSwap } from "./DataSwap.svg";
export { default as DevBig } from "./DevBig.svg";
export { default as DiscordSmall } from "./DiscordSmall.svg"; export { default as DiscordSmall } from "./DiscordSmall.svg";
export { default as DiscordSmallWhite } from "./DiscordSmallWhite.svg"; export { default as DiscordSmallWhite } from "./DiscordSmallWhite.svg";
export { default as Encryption } from "./Encryption.svg";
export { default as Error } from "./Error.svg"; export { default as Error } from "./Error.svg";
export { default as ExternalLink } from "./ExternalLink.svg";
export { default as Fingerprint } from "./Fingerprint.svg"; export { default as Fingerprint } from "./Fingerprint.svg";
export { default as GithubSmall } from "./GithubSmall.svg"; export { default as GithubSmall } from "./GithubSmall.svg";
export { default as GitlabSmall } from "./GitlabSmall.svg"; export { default as GitlabSmall } from "./GitlabSmall.svg";
export { default as Info } from "./Info.svg"; export { default as Info } from "./Info.svg";
export { default as Join } from "./Join.svg"; export { default as Join } from "./Join.svg";
export { default as Layers } from "./Layers.svg";
export { default as LinkedinSmall } from "./LinkedinSmall.svg"; export { default as LinkedinSmall } from "./LinkedinSmall.svg";
export { default as LogoBlackText } from "./LogoBlackText.svg"; export { default as LogoBlackText } from "./LogoBlackText.svg";
export { default as LogoWhiteText } from "./LogoWhiteText.svg"; export { default as LogoWhiteText } from "./LogoWhiteText.svg";
export { default as MediumSmall } from "./MediumSmall.svg"; export { default as MediumSmall } from "./MediumSmall.svg";
export { default as MenuMobile } from "./MenuMobile.svg"; export { default as MenuMobile } from "./MenuMobile.svg";
export { default as MenuMobileClose } from "./MenuMobileClose.svg"; export { default as MenuMobileClose } from "./MenuMobileClose.svg";
export { default as Mesh } from "./Mesh.svg";
export { default as ProgressRound } from "./ProgressRound.svg"; export { default as ProgressRound } from "./ProgressRound.svg";
export { default as RedditSmall } from "./RedditSmall.svg"; export { default as RedditSmall } from "./RedditSmall.svg";
export { default as Shield } from "./Shield.svg"; export { default as Shield } from "./Shield.svg";
@ -32,6 +38,7 @@ export { default as SkynetToolBig } from "./SkynetToolBig.svg";
export { default as SkynetUsageSmall } from "./SkynetUsageSmall.svg"; export { default as SkynetUsageSmall } from "./SkynetUsageSmall.svg";
export { default as SkynetUserBig } from "./SkynetUserBig.svg"; export { default as SkynetUserBig } from "./SkynetUserBig.svg";
export { default as TikTokSmall } from "./TikTokSmall.svg"; export { default as TikTokSmall } from "./TikTokSmall.svg";
export { default as Toolkit } from "./Toolkit.svg";
export { default as TwitterSmall } from "./TwitterSmall.svg"; export { default as TwitterSmall } from "./TwitterSmall.svg";
export { default as Unlock } from "./Unlock.svg"; export { default as Unlock } from "./Unlock.svg";
export { default as UserArrows } from "./UserArrows.svg"; export { default as UserArrows } from "./UserArrows.svg";

26
packages/website/src/components/Layout/Section.js
View File

@ -2,7 +2,7 @@ import * as React from "react";
import classnames from "classnames"; import classnames from "classnames";
export const Section = ({ children, className, ...props }) => ( export const Section = ({ children, className, ...props }) => (
<div className={classnames("p-8", className)} {...props}> <div className={classnames("px-8 py-16 desktop:py-32", className)} {...props}>
<div className="max-w-content mx-auto">{children}</div> <div className="max-w-content mx-auto">{children}</div>
</div> </div>
); );
@ -18,3 +18,27 @@ export const SectionTitleCaption = ({ children, className, ...props }) => (
{children} {children}
</h6> </h6>
); );
export const CardWithTitle = ({ Icon, title }) => (
<div className="flex flex-col items-center">
<Icon height="142" />
<p className="text-center mt-4 font-light text-palette-600 text-lg">{title}</p>
</div>
);
const Label = ({ children }) => (
<span className="inline-flex items-center px-3 leading-5 rounded-full text-xxs bg-palette-200 text-palette-600 lowercase">
{children}
</span>
);
export const CardWithDescription = ({ Icon, label, title, text }) => (
<div className="flex flex-col">
<div className="flex items-center space-x-4">
<Icon />
{label && <Label>{label}</Label>}
</div>
<h3 className="font-light text-lg mt-6">{title}</h3>
<p className="text-palette-400 font-content mt-6">{text}</p>
</div>
);

2
packages/website/src/components/Uploader/Uploader.js
View File

@ -221,7 +221,7 @@ const Uploader = () => {
}, [inputElement, mode]); }, [inputElement, mode]);
return ( return (
<div className="dekstop:px-8 py-12"> <div>
<div className="max-w-content mx-auto rounded-lg shadow bg-white z-0 relative"> <div className="max-w-content mx-auto rounded-lg shadow bg-white z-0 relative">
<div className="flex"> <div className="flex">
<button <button

21
packages/website/src/pages/about.js
View File

@ -1,6 +1,6 @@
import * as React from "react"; import * as React from "react";
import { StaticImage } from "gatsby-plugin-image"; import { StaticImage } from "gatsby-plugin-image";
import Layout, { Section, SectionTitle, SectionTitleCaption } from "../components/Layout"; import Layout, { Section, SectionTitle, SectionTitleCaption, CardWithDescription } from "../components/Layout";
import SEO from "../components/seo"; import SEO from "../components/seo";
import { import {
ArrowRight, ArrowRight,
@ -171,23 +171,6 @@ const teamCards = [
}, },
]; ];
const Label = ({ children }) => (
<span className="inline-flex items-center px-3 leading-5 rounded-full text-xxs bg-palette-200 text-palette-600 lowercase">
{children}
</span>
);
const EcosystemCard = ({ Icon, label, title, text }) => (
<div className="flex flex-col">
<div className="flex items-center space-x-4">
<Icon />
{label && <Label>{label}</Label>}
</div>
<h3 className="font-light text-lg mt-6">{title}</h3>
<p className="text-palette-400 font-content mt-6">{text}</p>
</div>
);
const SocialIcon = ({ name }) => { const SocialIcon = ({ name }) => {
switch (name) { switch (name) {
case "twitter": case "twitter":
@ -265,7 +248,7 @@ const AboutPage = () => (
<div className="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-2"> <div className="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-2">
{aboutCards.map((card, index) => ( {aboutCards.map((card, index) => (
<EcosystemCard key={index} {...card} /> <CardWithDescription key={index} {...card} />
))} ))}
</div> </div>

144
packages/website/src/pages/developers.js
View File

@ -1,11 +1,151 @@
import * as React from "react"; import * as React from "react";
import Layout, { Section, SectionTitle, CardWithDescription } from "../components/Layout";
import Layout from "../components/Layout/Layout"; import { ExternalLink, DataSwap, Encryption, Layers, Mesh, Toolkit, DevBig } from "../components/Icons";
import SEO from "../components/seo"; import SEO from "../components/seo";
const LearnMoreButton = () => (
<a
href="https://secure.siasky.net"
className="inline-block border-2 border-palette-600 text-palette-600 px-10 leading-10 rounded-full text-xs uppercase text-center mt-7"
>
Learn more
</a>
);
const reasonCards = [
{
Icon: DataSwap,
title: "Immutable Data, Globally Available. Trustless",
text:
"Our [IGDL] means data is instantly accessible on any device, by any portal and is fully verifiable, but leveraging trustees decentralize storage on the Sia blockchain.",
},
{
Icon: Encryption,
title: "Dynamic content with a user-focus",
text:
"SkyDB enables complex apps by providing a key-value store for mutable data secured by the private key of the user.",
},
{
Icon: Layers,
title: "BYO Frontend Library",
text:
"Our SDKs are built with web2 developers in mind and client-side web apps and static generators are perfect for using Skynet to deploy with.",
},
{
Icon: Mesh,
title: "Decentralized Stack-Friendly",
text:
"With integrations with HNS, ENS and easy use for off-chain storage, Skynet is positioned to connect with the DWeb and web3 technologies you need.",
},
{
Icon: Toolkit,
title: "Hack Today & Activate an Existing User base",
text:
"Start building without worrying about server overhead or where users will come from. Bootstrap the user experience with interoperable storage that costs you nothing and user-identity right out of the box.",
},
];
const resources = [
{ title: "Skynet Developer Guide", description: "Developer portal for resources and guides.", href: "" },
{ title: "Skynet SDK Docs", description: "SDKs in Javascript, Go, Python and more.", href: "" },
{ title: "Skynet Playground", description: "Interact with the core of Skynet, no code needed. ", href: "" },
{ title: "Skapp.io", description: "Explore webs apps in the ecosystem, many open source.", href: "" },
{ title: "Skynet Core Repo", description: "The code base that makes the rest tick.", href: "" },
{
title: "Skynet on Github",
description: "Includes SDKs, resources, and web portal. PR’s always welcome.",
href: "",
},
{
title: "Join us on Discord",
description: "A generous developer community, ready to solve hard problems.",
href: "",
},
];
const docs = [
{ name: "Developer Guide", href: "" },
{ name: "Skynet SDK Docs", href: "" },
];
const DevelopersPage = () => ( const DevelopersPage = () => (
<Layout> <Layout>
<SEO title="Developers" /> <SEO title="Developers" />
<Section>
<h1 className="font-semibold text-4xl desktop:text-6xl desktop:leading-16 text-white">
Decentralized Apps with speed, confidence, and <span className="text-primary underline">usability</span>
</h1>
<ul className="mt-12 space-y-2">
{docs.map(({ name, href }, index) => (
<li>
<a
href={href}
target="_blank"
rel="noopener noreferrer"
className="text-primary font-light text-lg inline-flex"
>
{name} <ExternalLink className="fill-current inline-block ml-2" height={28} />
</a>
</li>
))}
</ul>
</Section>
<Section className="bg-white">
<SectionTitle className="mb-7 desktop:hidden">Plenty of reason to use Skynet</SectionTitle>
<div className="grid grid-cols-1 gap-x-8 gap-y-16 desktop:grid-cols-3">
<div className="hidden desktop:inline-block">
<SectionTitle>Plenty of reason to use Skynet</SectionTitle>
<LearnMoreButton />
</div>
{reasonCards.map((card, index) => (
<CardWithDescription key={index} {...card} />
))}
</div>
<div className="desktop:hidden mt-12 text-center">
<LearnMoreButton />
</div>
</Section>
<Section className="bg-palette-100">
<SectionTitle className="text-center">Join a community of builders already using Skynet</SectionTitle>
<p className="text-center mt-20">cards</p>
</Section>
<Section className="bg-white">
<div className="grid grid-cols-1 gap-x-32 gap-y-10 desktop:grid-cols-3">
<div className="space-y-8">
<DevBig width="170" viewBox="90 0 170 142" />
<SectionTitle>Start building with Skynet</SectionTitle>
<p className="font-light text-lg">
Whether hosting your front-end or building a full-scale web app, start here.
</p>
</div>
<ul className="col-span-2 space-y-1">
{resources.map(({ href, title, description }, index) => (
<li key={index}>
<a
href={href}
className="block bg-palette-100 px-8 py-5 rounded border-2 border-palette-600 border-opacity-0 hover:border-opacity-100"
>
<div className="font-semibold text-lg">{title}</div>
<div className="font-content text-palette-400">{description}</div>
</a>
</li>
))}
</ul>
</div>
</Section>
</Layout> </Layout>
); );

37
packages/website/src/pages/index.js
View File

@ -1,6 +1,6 @@
import * as React from "react"; import * as React from "react";
// import { StaticImage } from "gatsby-plugin-image"; // import { StaticImage } from "gatsby-plugin-image";
import Layout, { Section, SectionTitle } from "../components/Layout"; import Layout, { Section, SectionTitle, CardWithDescription, CardWithTitle } from "../components/Layout";
import SEO from "../components/seo"; import SEO from "../components/seo";
import HeroStartPage from "../components/HeroStartPage"; import HeroStartPage from "../components/HeroStartPage";
import CommunitySection from "../components/CommunitySection"; import CommunitySection from "../components/CommunitySection";
@ -17,21 +17,6 @@ import {
SkynetSiaSmall, SkynetSiaSmall,
} from "../components/Icons"; } from "../components/Icons";
const EtosCard = ({ Icon, title }) => (
<div className="flex flex-col items-center">
<Icon height="142" />
<p className="text-center mt-4 font-light text-palette-600 text-lg">{title}</p>
</div>
);
const EcosystemCard = ({ Icon, title, text }) => (
<div className="flex flex-col">
<Icon />
<h3 className="font-light text-lg mt-6">{title}</h3>
<p className="text-palette-400 font-content mt-6">{text}</p>
</div>
);
const LearnMoreButton = () => ( const LearnMoreButton = () => (
<a <a
href="https://secure.siasky.net" href="https://secure.siasky.net"
@ -98,17 +83,19 @@ const IndexPage = () => {
<HeroStartPage /> <HeroStartPage />
</Section> </Section>
<Section className="relative"> <div className="px-8 py-16 relative">
<div className="absolute inset-x-0 bg-white bottom-0" style={{ top: "240px" }}></div> <div className="max-w-content mx-auto">
<Uploader /> <div className="absolute inset-x-0 bg-white bottom-0" style={{ top: "240px" }}></div>
</Section> <Uploader />
</div>
</div>
<Section className="bg-white py-32"> <Section className="bg-white">
<SectionTitle className="text-center mb-11">The new decentralized internet is here</SectionTitle> <SectionTitle className="text-center mb-11">The new decentralized internet is here</SectionTitle>
<div className="grid grid-cols-1 gap-8 desktop:grid-cols-3"> <div className="grid grid-cols-1 gap-8 desktop:grid-cols-3">
{etosCards.map((card, index) => ( {etosCards.map((card, index) => (
<EtosCard key={index} {...card} /> <CardWithTitle key={index} {...card} />
))} ))}
</div> </div>
@ -124,7 +111,7 @@ const IndexPage = () => {
</div> </div>
</Section> </Section>
<Section className="bg-palette-100 py-32"> <Section className="bg-palette-100">
<SectionTitle className="mb-7 desktop:hidden">Ready to build your application?</SectionTitle> <SectionTitle className="mb-7 desktop:hidden">Ready to build your application?</SectionTitle>
<div className="grid grid-cols-1 gap-x-8 gap-y-16 desktop:grid-cols-3"> <div className="grid grid-cols-1 gap-x-8 gap-y-16 desktop:grid-cols-3">
@ -135,7 +122,7 @@ const IndexPage = () => {
</div> </div>
{ecosystemCards.map((card, index) => ( {ecosystemCards.map((card, index) => (
<EcosystemCard key={index} {...card} /> <CardWithDescription key={index} {...card} />
))} ))}
</div> </div>
@ -144,7 +131,7 @@ const IndexPage = () => {
</div> </div>
</Section> </Section>
<Section className="py-24 bg-primary"> <Section className="bg-primary">
<CommunitySection /> <CommunitySection />
</Section> </Section>

14
packages/website/src/pages/news.js Normal file
View File

@ -0,0 +1,14 @@
import * as React from "react";
import Layout, { Section, SectionTitle } from "../components/Layout";
import SEO from "../components/seo";
const NewsPage = () => (
<Layout>
<SEO title="News" />
<Section className="bg-white">
<SectionTitle className="text-center py-48">News section coming soon!</SectionTitle>
</Section>
</Layout>
);
export default NewsPage;

8
packages/website/src/styles/global.css
View File

@ -17,3 +17,11 @@
.bg-error-dashed { .bg-error-dashed {
background: repeating-linear-gradient(to right, #ed5454, #ed5454 10px, transparent 10px, transparent 15px); background: repeating-linear-gradient(to right, #ed5454, #ed5454 10px, transparent 10px, transparent 15px);
} }
.tip {
width: 0;
height: 0;
border-style: solid;
border-width: 7px 0 7px 6px;
border-color: transparent transparent transparent #000000;
}