bachir/enfrancais-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add Home page

Browse Source
This commit is contained in:
axolotle
2021-07-05 14:50:49 +02:00
parent fa83b7ca41
commit 348e28df3c
4 changed files with 632 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/imgs/home-creations.svg
+49
View File
@@ -0,0 +1,49 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="970" height="670" viewBox="0 0 970 670" version="1.1" id="svg5889">
<defs id="defs5883">
<marker orient="auto" refY="0" refX="0" id="marker90834" style="overflow:visible">
<path id="path90832" d="m 5.77,0 -8.65,5 v -10 z" style="fill:#ff8873;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1pt;stroke-opacity:1" transform="scale(0.4)" />
</marker>
<filter style="color-interpolation-filters:sRGB" id="filter14240-8-1-2-1">
<feFlood flood-opacity="0.498039" flood-color="rgb(0,0,0)" result="flood" id="feFlood14230-6-1-7-5" />
<feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite14232-0-0-4-5" />
<feGaussianBlur in="composite1" stdDeviation="2" result="blur" id="feGaussianBlur14234-4-3-2-4" />
<feOffset dx="1.5" dy="1.5" result="offset" id="feOffset14236-8-4-5-9" />
<feComposite in="SourceGraphic" in2="offset" operator="over" result="composite2" id="feComposite14238-8-0-2-8" />
</filter>
<marker orient="auto" refY="0" refX="0" id="marker23282-3-7-3" style="overflow:visible">
<path id="path23280-8-6-8" d="m 5.77,0 -8.65,5 v -10 z" style="fill:#1b1b1b;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1pt;stroke-opacity:1" transform="scale(0.4)" />
</marker>
<marker orient="auto" refY="0" refX="0" id="marker22600-0-5-5" style="overflow:visible">
<path id="path22598-9-7-2" d="m 5.77,0 -8.65,5 v -10 z" style="fill:#98ff98;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1pt;stroke-opacity:1" transform="scale(0.4)" />
</marker>
<marker style="overflow:visible" id="marker24312-8-7-1-2" refX="0" refY="0" orient="auto">
<path transform="scale(0.4)" style="fill:#1b1b1b;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1pt;stroke-opacity:1" d="m 5.77,0 -8.65,5 v -10 z" id="path24310-8-99-3-2" />
</marker>
<marker style="overflow:visible" id="marker23768-6-32-3-7" refX="0" refY="0" orient="auto">
<path transform="scale(0.4)" style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1pt;stroke-opacity:1" d="m 5.77,0 -8.65,5 v -10 z" id="path23766-8-4-3-0" />
</marker>
</defs>
<metadata id="metadata5886">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g id="layer1">
<rect style="vector-effect:none;fill:#cccccc;fill-opacity:1;stroke:none;stroke-width:1.06855;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" id="rect149" width="307.023" height="14.883" x="331.484" y="574.134" />
<circle style="vector-effect:none;fill:#736f6e;fill-opacity:1;stroke:none;stroke-width:0.356181;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" id="circle151" cx="484.929" cy="334.424" r="41.8407" />
<circle r="33.9101" cy="334.424" cx="484.929" id="circle153" style="vector-effect:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.356181;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
<path id="path155" d="m 474.739,313.487 v 41.019 l 31.449,-20.235 z" style="fill:#736f6e;fill-opacity:1;stroke:none;stroke-width:0.376958px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<rect ry="0" rx="0" transform="matrix(4.13099,0,0,2.28439,-907.61,-2995.32)" style="display:inline;vector-effect:none;fill:#cccccc;fill-opacity:1;stroke:none;stroke-width:0.231893;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal;filter:url(#filter14240-8-1-2-1)" id="rect159" width="148.33" height="151.004" x="262.93" y="1382.34" />
<rect style="display:inline;vector-effect:none;fill:#1b1b1b;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-end:url(#marker23282-3-7-3);paint-order:normal" id="rect161" width="73.5882" height="11.9724" x="700.758" y="479.271" rx="15.8803" ry="15.8802" />
<rect ry="15.6663" rx="15.6663" y="477.24" x="698.729" height="11.8111" width="74.5916" id="rect163" style="display:inline;vector-effect:none;fill:#98ff98;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-end:url(#marker22600-0-5-5);paint-order:normal" />
<rect ry="15.8802" rx="15.8803" y="479.277" x="609.398" height="11.9724" width="82.294" id="rect167" style="display:inline;vector-effect:none;fill:#1b1b1b;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-end:url(#marker24312-8-7-1-2);paint-order:normal" />
<rect style="display:inline;vector-effect:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-end:url(#marker23768-6-32-3-7);paint-order:normal" id="rect169" width="83.2974" height="11.811" x="607.369" y="477.246" rx="15.6662" ry="15.6661" />
<rect transform="rotate(90)" ry="0" rx="0" y="-65" x="285" height="65" width="100" id="rect183" style="display:inline;vector-effect:none;fill:#98ff98;fill-opacity:1;stroke:none;stroke-width:0.944882;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
<rect style="display:inline;vector-effect:none;fill:#98ff98;fill-opacity:1;stroke:none;stroke-width:0.944882;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" id="rect185" width="100" height="65" x="285" y="-970" rx="0" ry="0" transform="rotate(90)" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

src/assets/imgs/home-kit.svg
+233
View File
@@ -0,0 +1,233 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="970" height="670" viewBox="0 0 970 670" version="1.1" id="svg5889">
<defs id="defs5883">
<marker orient="auto" refY="0" refX="0" id="marker90834" style="overflow:visible">
<path id="path90832" d="m 5.77,0 -8.65,5 v -10 z" style="fill:#ff8873;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1pt;stroke-opacity:1" transform="scale(0.4)" />
</marker>
</defs>
<metadata id="metadata5886">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g id="layer1">
<image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQ4AAACqCAYAAABcS6HpAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA
GXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABChJREFUeJzt3D9PnXUYx+H7oBGI
jQ0HWyZholP/DA4OrGrCIOmiiW+gJq68iS6uJrwChw4qHRjqyuDg0KYOFhfYKgKSkAAm5biYaCyc
Pl89h/OA1zUD9285H27I8/w6vfvLvQIIjI36AMDFIxxATDiAmHAAMeEAYq83+aLvv/xi2OeAS++9
z5dHfYSBsXEAMeEAYsIBxIQDiAkHEBMOICYcQEw4gJhwALGO+ziAlI0DiAkHEBMOICYcQEw4gJj7
OGiVy3RnxWVm4wBiwgHEhAOICQcQEw4gJhxATDiAmHAAMeEAYu7jAGI2DiAmHEBMOICYcAAx4QBi
7uNoEXdRcFHYOICYcAAx4QBiwgHEhAOICQcQEw4gJhxATDiAmPs4gJiNA4gJBxATDiAmHEBMOICY
cAAx4QBiwgHEhAOICQcQEw4g1uiW8x/e/3TY5wAG4N3vvjqXOTYOICYcQEw4gJhwADHhAGLCAcSE
A4gJBxATDiAmHEBMOICYcAAx4QBijd6OPa837oCLwcYBxIQDiAkHEBMOICYcQEw4gJhwADG3nMOA
/J+ed7JxADHhAGLCAcSEA4gJBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQc8s5ELNxADHhAGLC
AcSEA4gJBxATDiAmHEDMLedwgY3qGSsbBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQEw4gJhxA
TDiAmHAAMbecAzEbBxATDiAmHEBMOICYcAAx4QBiwgHE3HIOLXGRnpeycQAx4QBiwgHEhAOICQcQ
Ew4gJhxATDiAmHAAMeEAYsIBxIQDiAkHEHPLORCzcQAx4QBiwgHEhAOICQcQEw4gJhxATDiAWKMH
wP7upNer1Y2t+ubZZj15vls7R8f14qT3yu97baxT0xPjdXumW3dvzNXS/GyNdTqtnwu8rNO7v/zq
T9+fNvcP6t7aev24vfefB9+8NlUriws1d/VKa+cCp2v8p8rm/kEtPXg0kA9vVdXT7b1aevCoNvcP
WjkXOFujcLw46dW9tfXaOTwe6PCdw+P6bG29TnqnLz2jmgv01ygcD3/eGthv/H96ur1XqxtbrZoL
9NcoHF//tDnUQ3z77PQP8KjmAv01CseTX3aHeoizfv6o5gL9NQrHb0e/D/UQe0en/w9jVHOB/hqF
Y2rijaEeojsx3qq5QH+NwnF7pjvUQ9yZmW7VXKC/RuG4e2NuqIdYmn+nVXOB/hqFY2l+tm5emxrK
AW5d79ZH87Otmgv01ygcY51OrSwu1PTkYP8nMD05XiuLC2e+OzKquUB/jR85n7t6pVY//mBgG8Ct
6916+MmHNfvWm62cC5wtesmt6q+3VFc3turx89369fCo8Vuqb09O1J2Zbi3Nz/7rt2PPey7wsjgc
AC7yAWLCAcSEA4gJBxATDiD2Bys0D6rtlEW1AAAAAElFTkSuQmCC
" width="270" height="170" id="image7270" x="660" y="460" />
<image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQ4AAACqCAYAAABcS6HpAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA
GXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABChJREFUeJzt3D9PnXUYx+H7oBGI
jQ0HWyZholP/DA4OrGrCIOmiiW+gJq68iS6uJrwChw4qHRjqyuDg0KYOFhfYKgKSkAAm5biYaCyc
Pl89h/OA1zUD9285H27I8/w6vfvLvQIIjI36AMDFIxxATDiAmHAAMeEAYq83+aLvv/xi2OeAS++9
z5dHfYSBsXEAMeEAYsIBxIQDiAkHEBMOICYcQEw4gJhwALGO+ziAlI0DiAkHEBMOICYcQEw4gJj7
OGiVy3RnxWVm4wBiwgHEhAOICQcQEw4gJhxATDiAmHAAMeEAYu7jAGI2DiAmHEBMOICYcAAx4QBi
7uNoEXdRcFHYOICYcAAx4QBiwgHEhAOICQcQEw4gJhxATDiAmPs4gJiNA4gJBxATDiAmHEBMOICY
cAAx4QBiwgHEhAOICQcQEw4g1uiW8x/e/3TY5wAG4N3vvjqXOTYOICYcQEw4gJhwADHhAGLCAcSE
A4gJBxATDiAmHEBMOICYcAAx4QBijd6OPa837oCLwcYBxIQDiAkHEBMOICYcQEw4gJhwADG3nMOA
/J+ed7JxADHhAGLCAcSEA4gJBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQc8s5ELNxADHhAGLC
AcSEA4gJBxATDiAmHEDMLedwgY3qGSsbBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQEw4gJhxA
TDiAmHAAMbecAzEbBxATDiAmHEBMOICYcAAx4QBiwgHE3HIOLXGRnpeycQAx4QBiwgHEhAOICQcQ
Ew4gJhxATDiAmHAAMeEAYsIBxIQDiAkHEHPLORCzcQAx4QBiwgHEhAOICQcQEw4gJhxATDiAWKMH
wP7upNer1Y2t+ubZZj15vls7R8f14qT3yu97baxT0xPjdXumW3dvzNXS/GyNdTqtnwu8rNO7v/zq
T9+fNvcP6t7aev24vfefB9+8NlUriws1d/VKa+cCp2v8p8rm/kEtPXg0kA9vVdXT7b1aevCoNvcP
WjkXOFujcLw46dW9tfXaOTwe6PCdw+P6bG29TnqnLz2jmgv01ygcD3/eGthv/H96ur1XqxtbrZoL
9NcoHF//tDnUQ3z77PQP8KjmAv01CseTX3aHeoizfv6o5gL9NQrHb0e/D/UQe0en/w9jVHOB/hqF
Y2rijaEeojsx3qq5QH+NwnF7pjvUQ9yZmW7VXKC/RuG4e2NuqIdYmn+nVXOB/hqFY2l+tm5emxrK
AW5d79ZH87Otmgv01ygcY51OrSwu1PTkYP8nMD05XiuLC2e+OzKquUB/jR85n7t6pVY//mBgG8Ct
6916+MmHNfvWm62cC5wtesmt6q+3VFc3turx89369fCo8Vuqb09O1J2Zbi3Nz/7rt2PPey7wsjgc
AC7yAWLCAcSEA4gJBxATDiD2Bys0D6rtlEW1AAAAAElFTkSuQmCC
" width="270" height="170" id="image7262" x="350" y="460" />
<image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQ4AAACqCAYAAABcS6HpAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA
GXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABChJREFUeJzt3D9PnXUYx+H7oBGI
jQ0HWyZholP/DA4OrGrCIOmiiW+gJq68iS6uJrwChw4qHRjqyuDg0KYOFhfYKgKSkAAm5biYaCyc
Pl89h/OA1zUD9285H27I8/w6vfvLvQIIjI36AMDFIxxATDiAmHAAMeEAYq83+aLvv/xi2OeAS++9
z5dHfYSBsXEAMeEAYsIBxIQDiAkHEBMOICYcQEw4gJhwALGO+ziAlI0DiAkHEBMOICYcQEw4gJj7
OGiVy3RnxWVm4wBiwgHEhAOICQcQEw4gJhxATDiAmHAAMeEAYu7jAGI2DiAmHEBMOICYcAAx4QBi
7uNoEXdRcFHYOICYcAAx4QBiwgHEhAOICQcQEw4gJhxATDiAmPs4gJiNA4gJBxATDiAmHEBMOICY
cAAx4QBiwgHEhAOICQcQEw4g1uiW8x/e/3TY5wAG4N3vvjqXOTYOICYcQEw4gJhwADHhAGLCAcSE
A4gJBxATDiAmHEBMOICYcAAx4QBijd6OPa837oCLwcYBxIQDiAkHEBMOICYcQEw4gJhwADG3nMOA
/J+ed7JxADHhAGLCAcSEA4gJBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQc8s5ELNxADHhAGLC
AcSEA4gJBxATDiAmHEDMLedwgY3qGSsbBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQEw4gJhxA
TDiAmHAAMbecAzEbBxATDiAmHEBMOICYcAAx4QBiwgHE3HIOLXGRnpeycQAx4QBiwgHEhAOICQcQ
Ew4gJhxATDiAmHAAMeEAYsIBxIQDiAkHEHPLORCzcQAx4QBiwgHEhAOICQcQEw4gJhxATDiAWKMH
wP7upNer1Y2t+ubZZj15vls7R8f14qT3yu97baxT0xPjdXumW3dvzNXS/GyNdTqtnwu8rNO7v/zq
T9+fNvcP6t7aev24vfefB9+8NlUriws1d/VKa+cCp2v8p8rm/kEtPXg0kA9vVdXT7b1aevCoNvcP
WjkXOFujcLw46dW9tfXaOTwe6PCdw+P6bG29TnqnLz2jmgv01ygcD3/eGthv/H96ur1XqxtbrZoL
9NcoHF//tDnUQ3z77PQP8KjmAv01CseTX3aHeoizfv6o5gL9NQrHb0e/D/UQe0en/w9jVHOB/hqF
Y2rijaEeojsx3qq5QH+NwnF7pjvUQ9yZmW7VXKC/RuG4e2NuqIdYmn+nVXOB/hqFY2l+tm5emxrK
AW5d79ZH87Otmgv01ygcY51OrSwu1PTkYP8nMD05XiuLC2e+OzKquUB/jR85n7t6pVY//mBgG8Ct
6916+MmHNfvWm62cC5wtesmt6q+3VFc3turx89369fCo8Vuqb09O1J2Zbi3Nz/7rt2PPey7wsjgc
AC7yAWLCAcSEA4gJBxATDiD2Bys0D6rtlEW1AAAAAElFTkSuQmCC
" width="270" height="170" id="image7250" x="40" y="460" />
<image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQ4AAACqCAYAAABcS6HpAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA
GXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABChJREFUeJzt3D9PnXUYx+H7oBGI
jQ0HWyZholP/DA4OrGrCIOmiiW+gJq68iS6uJrwChw4qHRjqyuDg0KYOFhfYKgKSkAAm5biYaCyc
Pl89h/OA1zUD9285H27I8/w6vfvLvQIIjI36AMDFIxxATDiAmHAAMeEAYq83+aLvv/xi2OeAS++9
z5dHfYSBsXEAMeEAYsIBxIQDiAkHEBMOICYcQEw4gJhwALGO+ziAlI0DiAkHEBMOICYcQEw4gJj7
OGiVy3RnxWVm4wBiwgHEhAOICQcQEw4gJhxATDiAmHAAMeEAYu7jAGI2DiAmHEBMOICYcAAx4QBi
7uNoEXdRcFHYOICYcAAx4QBiwgHEhAOICQcQEw4gJhxATDiAmPs4gJiNA4gJBxATDiAmHEBMOICY
cAAx4QBiwgHEhAOICQcQEw4g1uiW8x/e/3TY5wAG4N3vvjqXOTYOICYcQEw4gJhwADHhAGLCAcSE
A4gJBxATDiAmHEBMOICYcAAx4QBijd6OPa837oCLwcYBxIQDiAkHEBMOICYcQEw4gJhwADG3nMOA
/J+ed7JxADHhAGLCAcSEA4gJBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQc8s5ELNxADHhAGLC
AcSEA4gJBxATDiAmHEDMLedwgY3qGSsbBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQEw4gJhxA
TDiAmHAAMbecAzEbBxATDiAmHEBMOICYcAAx4QBiwgHE3HIOLXGRnpeycQAx4QBiwgHEhAOICQcQ
Ew4gJhxATDiAmHAAMeEAYsIBxIQDiAkHEHPLORCzcQAx4QBiwgHEhAOICQcQEw4gJhxATDiAWKMH
wP7upNer1Y2t+ubZZj15vls7R8f14qT3yu97baxT0xPjdXumW3dvzNXS/GyNdTqtnwu8rNO7v/zq
T9+fNvcP6t7aev24vfefB9+8NlUriws1d/VKa+cCp2v8p8rm/kEtPXg0kA9vVdXT7b1aevCoNvcP
WjkXOFujcLw46dW9tfXaOTwe6PCdw+P6bG29TnqnLz2jmgv01ygcD3/eGthv/H96ur1XqxtbrZoL
9NcoHF//tDnUQ3z77PQP8KjmAv01CseTX3aHeoizfv6o5gL9NQrHb0e/D/UQe0en/w9jVHOB/hqF
Y2rijaEeojsx3qq5QH+NwnF7pjvUQ9yZmW7VXKC/RuG4e2NuqIdYmn+nVXOB/hqFY2l+tm5emxrK
AW5d79ZH87Otmgv01ygcY51OrSwu1PTkYP8nMD05XiuLC2e+OzKquUB/jR85n7t6pVY//mBgG8Ct
6916+MmHNfvWm62cC5wtesmt6q+3VFc3turx89369fCo8Vuqb09O1J2Zbi3Nz/7rt2PPey7wsjgc
AC7yAWLCAcSEA4gJBxATDiD2Bys0D6rtlEW1AAAAAElFTkSuQmCC
" width="270" height="170" id="image7252" transform="translate(40,460)" />
<image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQ4AAACqCAYAAABcS6HpAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA
GXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABChJREFUeJzt3D9PnXUYx+H7oBGI
jQ0HWyZholP/DA4OrGrCIOmiiW+gJq68iS6uJrwChw4qHRjqyuDg0KYOFhfYKgKSkAAm5biYaCyc
Pl89h/OA1zUD9285H27I8/w6vfvLvQIIjI36AMDFIxxATDiAmHAAMeEAYq83+aLvv/xi2OeAS++9
z5dHfYSBsXEAMeEAYsIBxIQDiAkHEBMOICYcQEw4gJhwALGO+ziAlI0DiAkHEBMOICYcQEw4gJj7
OGiVy3RnxWVm4wBiwgHEhAOICQcQEw4gJhxATDiAmHAAMeEAYu7jAGI2DiAmHEBMOICYcAAx4QBi
7uNoEXdRcFHYOICYcAAx4QBiwgHEhAOICQcQEw4gJhxATDiAmPs4gJiNA4gJBxATDiAmHEBMOICY
cAAx4QBiwgHEhAOICQcQEw4g1uiW8x/e/3TY5wAG4N3vvjqXOTYOICYcQEw4gJhwADHhAGLCAcSE
A4gJBxATDiAmHEBMOICYcAAx4QBijd6OPa837oCLwcYBxIQDiAkHEBMOICYcQEw4gJhwADG3nMOA
/J+ed7JxADHhAGLCAcSEA4gJBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQc8s5ELNxADHhAGLC
AcSEA4gJBxATDiAmHEDMLedwgY3qGSsbBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQEw4gJhxA
TDiAmHAAMbecAzEbBxATDiAmHEBMOICYcAAx4QBiwgHE3HIOLXGRnpeycQAx4QBiwgHEhAOICQcQ
Ew4gJhxATDiAmHAAMeEAYsIBxIQDiAkHEHPLORCzcQAx4QBiwgHEhAOICQcQEw4gJhxATDiAWKMH
wP7upNer1Y2t+ubZZj15vls7R8f14qT3yu97baxT0xPjdXumW3dvzNXS/GyNdTqtnwu8rNO7v/zq
T9+fNvcP6t7aev24vfefB9+8NlUriws1d/VKa+cCp2v8p8rm/kEtPXg0kA9vVdXT7b1aevCoNvcP
WjkXOFujcLw46dW9tfXaOTwe6PCdw+P6bG29TnqnLz2jmgv01ygcD3/eGthv/H96ur1XqxtbrZoL
9NcoHF//tDnUQ3z77PQP8KjmAv01CseTX3aHeoizfv6o5gL9NQrHb0e/D/UQe0en/w9jVHOB/hqF
Y2rijaEeojsx3qq5QH+NwnF7pjvUQ9yZmW7VXKC/RuG4e2NuqIdYmn+nVXOB/hqFY2l+tm5emxrK
AW5d79ZH87Otmgv01ygcY51OrSwu1PTkYP8nMD05XiuLC2e+OzKquUB/jR85n7t6pVY//mBgG8Ct
6916+MmHNfvWm62cC5wtesmt6q+3VFc3turx89369fCo8Vuqb09O1J2Zbi3Nz/7rt2PPey7wsjgc
AC7yAWLCAcSEA4gJBxATDiD2Bys0D6rtlEW1AAAAAElFTkSuQmCC
" width="270" height="170" id="image7236" x="660" y="250" />
<image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQ4AAACqCAYAAABcS6HpAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA
GXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABChJREFUeJzt3D9PnXUYx+H7oBGI
jQ0HWyZholP/DA4OrGrCIOmiiW+gJq68iS6uJrwChw4qHRjqyuDg0KYOFhfYKgKSkAAm5biYaCyc
Pl89h/OA1zUD9285H27I8/w6vfvLvQIIjI36AMDFIxxATDiAmHAAMeEAYq83+aLvv/xi2OeAS++9
z5dHfYSBsXEAMeEAYsIBxIQDiAkHEBMOICYcQEw4gJhwALGO+ziAlI0DiAkHEBMOICYcQEw4gJj7
OGiVy3RnxWVm4wBiwgHEhAOICQcQEw4gJhxATDiAmHAAMeEAYu7jAGI2DiAmHEBMOICYcAAx4QBi
7uNoEXdRcFHYOICYcAAx4QBiwgHEhAOICQcQEw4gJhxATDiAmPs4gJiNA4gJBxATDiAmHEBMOICY
cAAx4QBiwgHEhAOICQcQEw4g1uiW8x/e/3TY5wAG4N3vvjqXOTYOICYcQEw4gJhwADHhAGLCAcSE
A4gJBxATDiAmHEBMOICYcAAx4QBijd6OPa837oCLwcYBxIQDiAkHEBMOICYcQEw4gJhwADG3nMOA
/J+ed7JxADHhAGLCAcSEA4gJBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQc8s5ELNxADHhAGLC
AcSEA4gJBxATDiAmHEDMLedwgY3qGSsbBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQEw4gJhxA
TDiAmHAAMbecAzEbBxATDiAmHEBMOICYcAAx4QBiwgHE3HIOLXGRnpeycQAx4QBiwgHEhAOICQcQ
Ew4gJhxATDiAmHAAMeEAYsIBxIQDiAkHEHPLORCzcQAx4QBiwgHEhAOICQcQEw4gJhxATDiAWKMH
wP7upNer1Y2t+ubZZj15vls7R8f14qT3yu97baxT0xPjdXumW3dvzNXS/GyNdTqtnwu8rNO7v/zq
T9+fNvcP6t7aev24vfefB9+8NlUriws1d/VKa+cCp2v8p8rm/kEtPXg0kA9vVdXT7b1aevCoNvcP
WjkXOFujcLw46dW9tfXaOTwe6PCdw+P6bG29TnqnLz2jmgv01ygcD3/eGthv/H96ur1XqxtbrZoL
9NcoHF//tDnUQ3z77PQP8KjmAv01CseTX3aHeoizfv6o5gL9NQrHb0e/D/UQe0en/w9jVHOB/hqF
Y2rijaEeojsx3qq5QH+NwnF7pjvUQ9yZmW7VXKC/RuG4e2NuqIdYmn+nVXOB/hqFY2l+tm5emxrK
AW5d79ZH87Otmgv01ygcY51OrSwu1PTkYP8nMD05XiuLC2e+OzKquUB/jR85n7t6pVY//mBgG8Ct
6916+MmHNfvWm62cC5wtesmt6q+3VFc3turx89369fCo8Vuqb09O1J2Zbi3Nz/7rt2PPey7wsjgc
AC7yAWLCAcSEA4gJBxATDiD2Bys0D6rtlEW1AAAAAElFTkSuQmCC
" width="270" height="170" id="image7210" x="350" y="250" />
<image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQ4AAACqCAYAAABcS6HpAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA
GXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABChJREFUeJzt3D9PnXUYx+H7oBGI
jQ0HWyZholP/DA4OrGrCIOmiiW+gJq68iS6uJrwChw4qHRjqyuDg0KYOFhfYKgKSkAAm5biYaCyc
Pl89h/OA1zUD9285H27I8/w6vfvLvQIIjI36AMDFIxxATDiAmHAAMeEAYq83+aLvv/xi2OeAS++9
z5dHfYSBsXEAMeEAYsIBxIQDiAkHEBMOICYcQEw4gJhwALGO+ziAlI0DiAkHEBMOICYcQEw4gJj7
OGiVy3RnxWVm4wBiwgHEhAOICQcQEw4gJhxATDiAmHAAMeEAYu7jAGI2DiAmHEBMOICYcAAx4QBi
7uNoEXdRcFHYOICYcAAx4QBiwgHEhAOICQcQEw4gJhxATDiAmPs4gJiNA4gJBxATDiAmHEBMOICY
cAAx4QBiwgHEhAOICQcQEw4g1uiW8x/e/3TY5wAG4N3vvjqXOTYOICYcQEw4gJhwADHhAGLCAcSE
A4gJBxATDiAmHEBMOICYcAAx4QBijd6OPa837oCLwcYBxIQDiAkHEBMOICYcQEw4gJhwADG3nMOA
/J+ed7JxADHhAGLCAcSEA4gJBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQc8s5ELNxADHhAGLC
AcSEA4gJBxATDiAmHEDMLedwgY3qGSsbBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQEw4gJhxA
TDiAmHAAMbecAzEbBxATDiAmHEBMOICYcAAx4QBiwgHE3HIOLXGRnpeycQAx4QBiwgHEhAOICQcQ
Ew4gJhxATDiAmHAAMeEAYsIBxIQDiAkHEHPLORCzcQAx4QBiwgHEhAOICQcQEw4gJhxATDiAWKMH
wP7upNer1Y2t+ubZZj15vls7R8f14qT3yu97baxT0xPjdXumW3dvzNXS/GyNdTqtnwu8rNO7v/zq
T9+fNvcP6t7aev24vfefB9+8NlUriws1d/VKa+cCp2v8p8rm/kEtPXg0kA9vVdXT7b1aevCoNvcP
WjkXOFujcLw46dW9tfXaOTwe6PCdw+P6bG29TnqnLz2jmgv01ygcD3/eGthv/H96ur1XqxtbrZoL
9NcoHF//tDnUQ3z77PQP8KjmAv01CseTX3aHeoizfv6o5gL9NQrHb0e/D/UQe0en/w9jVHOB/hqF
Y2rijaEeojsx3qq5QH+NwnF7pjvUQ9yZmW7VXKC/RuG4e2NuqIdYmn+nVXOB/hqFY2l+tm5emxrK
AW5d79ZH87Otmgv01ygcY51OrSwu1PTkYP8nMD05XiuLC2e+OzKquUB/jR85n7t6pVY//mBgG8Ct
6916+MmHNfvWm62cC5wtesmt6q+3VFc3turx89369fCo8Vuqb09O1J2Zbi3Nz/7rt2PPey7wsjgc
AC7yAWLCAcSEA4gJBxATDiD2Bys0D6rtlEW1AAAAAElFTkSuQmCC
" width="270" height="170" id="image7192" x="40" y="250" />
<image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQ4AAACqCAYAAABcS6HpAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA
GXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABChJREFUeJzt3D9PnXUYx+H7oBGI
jQ0HWyZholP/DA4OrGrCIOmiiW+gJq68iS6uJrwChw4qHRjqyuDg0KYOFhfYKgKSkAAm5biYaCyc
Pl89h/OA1zUD9285H27I8/w6vfvLvQIIjI36AMDFIxxATDiAmHAAMeEAYq83+aLvv/xi2OeAS++9
z5dHfYSBsXEAMeEAYsIBxIQDiAkHEBMOICYcQEw4gJhwALGO+ziAlI0DiAkHEBMOICYcQEw4gJj7
OGiVy3RnxWVm4wBiwgHEhAOICQcQEw4gJhxATDiAmHAAMeEAYu7jAGI2DiAmHEBMOICYcAAx4QBi
7uNoEXdRcFHYOICYcAAx4QBiwgHEhAOICQcQEw4gJhxATDiAmPs4gJiNA4gJBxATDiAmHEBMOICY
cAAx4QBiwgHEhAOICQcQEw4g1uiW8x/e/3TY5wAG4N3vvjqXOTYOICYcQEw4gJhwADHhAGLCAcSE
A4gJBxATDiAmHEBMOICYcAAx4QBijd6OPa837oCLwcYBxIQDiAkHEBMOICYcQEw4gJhwADG3nMOA
/J+ed7JxADHhAGLCAcSEA4gJBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQc8s5ELNxADHhAGLC
AcSEA4gJBxATDiAmHEDMLedwgY3qGSsbBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQEw4gJhxA
TDiAmHAAMbecAzEbBxATDiAmHEBMOICYcAAx4QBiwgHE3HIOLXGRnpeycQAx4QBiwgHEhAOICQcQ
Ew4gJhxATDiAmHAAMeEAYsIBxIQDiAkHEHPLORCzcQAx4QBiwgHEhAOICQcQEw4gJhxATDiAWKMH
wP7upNer1Y2t+ubZZj15vls7R8f14qT3yu97baxT0xPjdXumW3dvzNXS/GyNdTqtnwu8rNO7v/zq
T9+fNvcP6t7aev24vfefB9+8NlUriws1d/VKa+cCp2v8p8rm/kEtPXg0kA9vVdXT7b1aevCoNvcP
WjkXOFujcLw46dW9tfXaOTwe6PCdw+P6bG29TnqnLz2jmgv01ygcD3/eGthv/H96ur1XqxtbrZoL
9NcoHF//tDnUQ3z77PQP8KjmAv01CseTX3aHeoizfv6o5gL9NQrHb0e/D/UQe0en/w9jVHOB/hqF
Y2rijaEeojsx3qq5QH+NwnF7pjvUQ9yZmW7VXKC/RuG4e2NuqIdYmn+nVXOB/hqFY2l+tm5emxrK
AW5d79ZH87Otmgv01ygcY51OrSwu1PTkYP8nMD05XiuLC2e+OzKquUB/jR85n7t6pVY//mBgG8Ct
6916+MmHNfvWm62cC5wtesmt6q+3VFc3turx89369fCo8Vuqb09O1J2Zbi3Nz/7rt2PPey7wsjgc
AC7yAWLCAcSEA4gJBxATDiD2Bys0D6rtlEW1AAAAAElFTkSuQmCC
" width="270" height="170" id="image7184" x="660" y="40" />
<image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQ4AAACqCAYAAABcS6HpAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA
GXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABChJREFUeJzt3D9PnXUYx+H7oBGI
jQ0HWyZholP/DA4OrGrCIOmiiW+gJq68iS6uJrwChw4qHRjqyuDg0KYOFhfYKgKSkAAm5biYaCyc
Pl89h/OA1zUD9285H27I8/w6vfvLvQIIjI36AMDFIxxATDiAmHAAMeEAYq83+aLvv/xi2OeAS++9
z5dHfYSBsXEAMeEAYsIBxIQDiAkHEBMOICYcQEw4gJhwALGO+ziAlI0DiAkHEBMOICYcQEw4gJj7
OGiVy3RnxWVm4wBiwgHEhAOICQcQEw4gJhxATDiAmHAAMeEAYu7jAGI2DiAmHEBMOICYcAAx4QBi
7uNoEXdRcFHYOICYcAAx4QBiwgHEhAOICQcQEw4gJhxATDiAmPs4gJiNA4gJBxATDiAmHEBMOICY
cAAx4QBiwgHEhAOICQcQEw4g1uiW8x/e/3TY5wAG4N3vvjqXOTYOICYcQEw4gJhwADHhAGLCAcSE
A4gJBxATDiAmHEBMOICYcAAx4QBijd6OPa837oCLwcYBxIQDiAkHEBMOICYcQEw4gJhwADG3nMOA
/J+ed7JxADHhAGLCAcSEA4gJBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQc8s5ELNxADHhAGLC
AcSEA4gJBxATDiAmHEDMLedwgY3qGSsbBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQEw4gJhxA
TDiAmHAAMbecAzEbBxATDiAmHEBMOICYcAAx4QBiwgHE3HIOLXGRnpeycQAx4QBiwgHEhAOICQcQ
Ew4gJhxATDiAmHAAMeEAYsIBxIQDiAkHEHPLORCzcQAx4QBiwgHEhAOICQcQEw4gJhxATDiAWKMH
wP7upNer1Y2t+ubZZj15vls7R8f14qT3yu97baxT0xPjdXumW3dvzNXS/GyNdTqtnwu8rNO7v/zq
T9+fNvcP6t7aev24vfefB9+8NlUriws1d/VKa+cCp2v8p8rm/kEtPXg0kA9vVdXT7b1aevCoNvcP
WjkXOFujcLw46dW9tfXaOTwe6PCdw+P6bG29TnqnLz2jmgv01ygcD3/eGthv/H96ur1XqxtbrZoL
9NcoHF//tDnUQ3z77PQP8KjmAv01CseTX3aHeoizfv6o5gL9NQrHb0e/D/UQe0en/w9jVHOB/hqF
Y2rijaEeojsx3qq5QH+NwnF7pjvUQ9yZmW7VXKC/RuG4e2NuqIdYmn+nVXOB/hqFY2l+tm5emxrK
AW5d79ZH87Otmgv01ygcY51OrSwu1PTkYP8nMD05XiuLC2e+OzKquUB/jR85n7t6pVY//mBgG8Ct
6916+MmHNfvWm62cC5wtesmt6q+3VFc3turx89369fCo8Vuqb09O1J2Zbi3Nz/7rt2PPey7wsjgc
AC7yAWLCAcSEA4gJBxATDiD2Bys0D6rtlEW1AAAAAElFTkSuQmCC
" width="270" height="170" id="image7164" x="350" y="40" />
<g id="g7150">
<rect style="display:inline;vector-effect:none;fill:#ff8873;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-end:url(#marker90834);paint-order:normal" id="rect111813" width="270" height="170" x="40" y="40" />
<rect y="46" x="49" height="10" width="210" id="rect111831" style="vector-effect:none;fill:#c81e00;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
<rect style="vector-effect:none;fill:#c81e00;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" id="rect111833" width="155" height="10" x="49" y="62" />
<rect style="vector-effect:none;fill:#cccccc;fill-opacity:1;stroke:none;stroke-width:2.83465;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" id="rect111835" width="235" height="14" x="49" y="100" />
<rect y="122" x="49" height="14" width="202" id="rect111837" style="vector-effect:none;fill:#cccccc;fill-opacity:1;stroke:none;stroke-width:2.83465;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
<rect style="vector-effect:none;fill:#cccccc;fill-opacity:1;stroke:none;stroke-width:2.83465;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" id="rect111839" width="231" height="14" x="49" y="144" />
<rect y="166" x="49" height="14" width="218" id="rect111841" style="vector-effect:none;fill:#cccccc;fill-opacity:1;stroke:none;stroke-width:2.83465;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
<rect y="78.0003" x="49" height="10" width="90" id="rect111843" style="vector-effect:none;fill:#c81e00;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
<rect ry="7.5" rx="7.5" style="display:inline;vector-effect:none;fill:#1b1b1b;fill-opacity:1;stroke:none;stroke-width:2.835;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" id="rect111935" width="25" height="15" x="79.0001" y="189" />
<rect y="189" x="49" height="15" width="25" id="rect111937" style="display:inline;vector-effect:none;fill:#1b1b1b;fill-opacity:1;stroke:none;stroke-width:2.83465;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" rx="7.5" ry="7.5" />
<rect ry="7.5" rx="7.5" style="display:inline;vector-effect:none;fill:#1b1b1b;fill-opacity:1;stroke:none;stroke-width:2.835;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" id="rect7304" width="25" height="15" x="419" y="189" />
<rect ry="7.5" rx="7.5" style="display:inline;vector-effect:none;fill:#1b1b1b;fill-opacity:1;stroke:none;stroke-width:2.835;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" id="rect7306" width="25" height="15" x="109" y="399" />
<rect ry="7.5" rx="7.5" style="display:inline;vector-effect:none;fill:#1b1b1b;fill-opacity:1;stroke:none;stroke-width:2.835;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" id="rect7308" width="25" height="15" x="109" y="399" />
<rect ry="7.5" rx="7.5" style="display:inline;vector-effect:none;fill:#1b1b1b;fill-opacity:1;stroke:none;stroke-width:2.835;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" id="rect7322" width="25" height="15" x="419" y="609" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

src/assets/imgs/home-library.svg
+191
View File
@@ -0,0 +1,191 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-685 -481 1412.57 1340.1" width="1412.57" height="1340.1" id="svg205">
<metadata id="metadata211">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs id="defs209" />
<style id="style2">
/* <![CDATA[ */
.svg-link {
stroke: grey;
vector-effect: non-scaling-stroke;
}
.svg-link.siblings {
stroke-dasharray: 4;
}
.svg-link.parents {
stroke: red;
opacity: .3;
}
.svg-dot-depart {
fill: #fff;
stroke: #000;
stroke-width: 3px;
vector-effect: non-scaling-stroke;
}
.svg-dot-echo {
fill: #db7dff;
}
.svg-dot-lecture {
fill: #9191ff;
}
.svg-dot-reflexion {
fill: #ffe87d;
}
.svg-dot-sensible {
fill: #cdae87;
}
.svg-dot-critique {
fill: #ffba7d;
}
.svg-dot-lecture {
fill: #9191ff;
}
.svg-dot-kit {
fill: #ff775f;
}
.svg-dot-dark {
fill: #ff775f;
}
/* ]]> */
</style>
<g id="g203" transform="translate(-42.581,119.402)">
<path d="m -297.883,-251.614 -152.276,121.349" class="svg-link siblings" id="path4" />
<path d="m -297.883,-251.614 -17.785,-200.326" class="svg-link siblings" id="path6" />
<path d="m -297.883,-251.614 76.099,234.8608" class="svg-link siblings" id="path8" />
<path d="m -297.883,-251.614 -51.109,-70.245" class="svg-link children" id="path10" />
<path d="m -297.883,-251.614 84.131,-136.65" class="svg-link children" id="path12" />
<path d="m -297.883,-251.614 69.324,-24.484" class="svg-link children" id="path14" />
<path d="m -297.883,-251.614 15.799,-84.849" class="svg-link children" id="path16" />
<path d="m -450.159,-130.265 22.959,125.42338" class="svg-link siblings" id="path18" />
<path d="m -450.159,-130.265 -142.76,25.471" class="svg-link siblings" id="path20" />
<path d="m -450.159,-130.265 -30.815,-101.107" class="svg-link children" id="path22" />
<path d="m -450.159,-130.265 -69.749,36.031" class="svg-link children" id="path24" />
<path d="m -450.159,-130.265 -72.962,-50.887" class="svg-link children" id="path26" />
<path d="m -450.159,-130.265 39.498,-44.223" class="svg-link children" id="path28" />
<path d="m -221.784,-16.7532 92.024,233.3822" class="svg-link siblings" id="path30" />
<path d="m -213.752,-388.264 92.337,-162.638" class="svg-link siblings" id="path32" />
<path d="m -427.2,-4.84162 -106.869,26.72922" class="svg-link siblings" id="path34" />
<path d="m -592.919,-104.794 73.011,10.56" class="svg-link children" id="path36" />
<path d="m -519.908,-94.234 92.708,89.39238" class="svg-link siblings" id="path38" />
<path d="m -129.76,216.629 -110.409,158.435" class="svg-link siblings" id="path40" />
<path d="m -129.76,216.629 250.453,-90.99" class="svg-link siblings" id="path42" />
<path d="m -129.76,216.629 99.5813,-178.5156" class="svg-link siblings" id="path44" />
<path d="m -129.76,216.629 -174.6,58.722" class="svg-link siblings" id="path46" />
<path d="m -129.76,216.629 60.8636,-35.277" class="svg-link children" id="path48" />
<path d="m -129.76,216.629 77.2024,125.127" class="svg-link children" id="path50" />
<path d="m -129.76,216.629 -94.391,15.418" class="svg-link children" id="path52" />
<path d="m -129.76,216.629 -33.159,69.626" class="svg-link children" id="path54" />
<path d="m -534.069,21.8876 83.91,-152.1526" class="svg-link siblings" id="path56" />
<path d="m -534.069,21.8876 -39.126,69.3928" class="svg-link children" id="path58" />
<path d="m 120.693,125.639 289.688,-115.635" class="svg-link siblings" id="path60" />
<path d="m -30.1787,38.1134 172.8097,-128.8387" class="svg-link siblings" id="path62" />
<path d="m -68.8964,181.352 189.5894,-55.713" class="svg-link siblings" id="path64" />
<path d="m -52.5576,341.756 -171.5934,-109.709" class="svg-link parents" id="path66" />
<path d="m -52.5576,341.756 65.6286,139.409" class="svg-link siblings" id="path68" />
<path d="m -52.5576,341.756 184.0216,61.5" class="svg-link siblings" id="path70" />
<path d="m -224.151,232.047 -233.891,122.138" class="svg-link parents" id="path72" />
<path d="m -162.919,286.255 192.4023,-73.729" class="svg-link parents" id="path74" />
<path d="m 410.381,10.004 154.292,63.6951" class="svg-link siblings" id="path76" />
<path d="m 410.381,10.004 28.457,-198.243" class="svg-link siblings" id="path78" />
<path d="m 410.381,10.004 136.287,-144.78" class="svg-link siblings" id="path80" />
<path d="m 410.381,10.004 46.835,48.3349" class="svg-link children" id="path82" />
<path d="m 410.381,10.004 37.561,-68.0975" class="svg-link children" id="path84" />
<path d="m 410.381,10.004 111.622,-52.9377" class="svg-link children" id="path86" />
<path d="m 410.381,10.004 -29.548,-55.369" class="svg-link children" id="path88" />
<path d="m 142.631,-90.7253 26.625,-113.0557" class="svg-link children" id="path90" />
<path d="m 142.631,-90.7253 -62.9894,6.3272" class="svg-link children" id="path92" />
<path d="m 142.631,-90.7253 -42.437,-113.1377" class="svg-link children" id="path94" />
<path d="m 142.631,-90.7253 55.945,-52.8557" class="svg-link children" id="path96" />
<path d="m 142.631,-90.7253 -84.7254,-61.0157" class="svg-link children" id="path98" />
<path d="m 142.631,-90.7253 62.055,70.4835" class="svg-link children" id="path100" />
<path d="m 13.071,481.165 117.06,74.43" class="svg-link siblings" id="path102" />
<path d="m 131.464,403.256 -118.393,77.909" class="svg-link siblings" id="path104" />
<path d="m 131.464,403.256 -1.333,152.339" class="svg-link siblings" id="path106" />
<path d="m 131.464,403.256 50.548,-152.73" class="svg-link siblings" id="path108" />
<path d="m 131.464,403.256 136.148,-131.354" class="svg-link siblings" id="path110" />
<path d="m 131.464,403.256 17.119,81.724" class="svg-link children" id="path112" />
<path d="m 522.003,-42.9337 46.244,-269.9133" class="svg-link parents" id="path114" />
<path d="m 522.003,-42.9337 198.652,97.5518" class="svg-link parents" id="path116" />
<path d="m 204.686,-20.2418 -46.773,-315.7282" class="svg-link parents" id="path118" />
<path d="m 204.686,-20.2418 73.547,-299.7812" class="svg-link parents" id="path120" />
<path d="m 204.686,-20.2418 165.021,180.7588" class="svg-link parents" id="path122" />
<path d="m 204.686,-20.2418 -22.674,270.7678" class="svg-link parents" id="path124" />
<path d="m 204.686,-20.2418 62.926,292.1438" class="svg-link parents" id="path126" />
<path d="m 130.131,555.595 -128.02091,85.652" class="svg-link siblings" id="path128" />
<path d="m 130.131,555.595 105.91,94.305" class="svg-link siblings" id="path130" />
<path d="m 130.131,555.595 -24.545,134.599" class="svg-link siblings" id="path132" />
<path d="m 130.131,555.595 157.52,-13.198" class="svg-link siblings" id="path134" />
<path d="m 130.131,555.595 18.452,-70.615" class="svg-link children" id="path136" />
<path d="m 182.012,250.526 85.6,21.376" class="svg-link siblings" id="path138" />
<circle r="9.5" cx="-297.883" cy="-251.614" id="preview-node-83" tabindex="0" class="svg-dot svg-dot-depart origin" />
<circle r="9.5" cx="-450.159" cy="-130.265" id="preview-node-72" tabindex="0" class="svg-dot svg-dot-depart" />
<circle r="9.5" cx="-315.668" cy="-451.94" id="preview-node-89" tabindex="0" class="svg-dot svg-dot-echo" />
<circle r="9.5" cx="-221.784" cy="-16.7532" id="preview-node-218" tabindex="0" class="svg-dot svg-dot-depart" />
<circle r="9.5" cx="-348.992" cy="-321.859" id="preview-node-84" tabindex="0" class="svg-dot svg-dot-lecture" />
<circle r="9.5" cx="-213.752" cy="-388.264" id="preview-node-85" tabindex="0" class="svg-dot svg-dot-reflexion" />
<circle r="9.5" cx="-228.559" cy="-276.098" id="preview-node-90" tabindex="0" class="svg-dot svg-dot-sensible" />
<circle r="9.5" cx="-282.084" cy="-336.463" id="preview-node-91" tabindex="0" class="svg-dot svg-dot-sensible" />
<circle r="9.5" cx="-427.2" cy="-4.84162" id="preview-node-82" tabindex="0" class="svg-dot svg-dot-echo" />
<circle r="9.5" cx="-592.919" cy="-104.794" id="preview-node-78" tabindex="0" class="svg-dot svg-dot-critique" />
<circle r="9.5" cx="-480.974" cy="-231.372" id="preview-node-73" tabindex="0" class="svg-dot svg-dot-lecture" />
<circle r="9.5" cx="-519.908" cy="-94.234" id="preview-node-77" tabindex="0" class="svg-dot svg-dot-reflexion" />
<circle r="9.5" cx="-523.121" cy="-181.152" id="preview-node-80" tabindex="0" class="svg-dot svg-dot-kit" />
<circle r="9.5" cx="-410.661" cy="-174.488" id="preview-node-81" tabindex="0" class="svg-dot svg-dot-sensible" />
<circle r="9.5" cx="-129.76" cy="216.629" id="preview-node-214" tabindex="0" class="svg-dot svg-dot-depart" />
<circle r="9.5" cx="-121.415" cy="-550.902" id="preview-node-88" tabindex="0" class="svg-dot svg-dot-critique" />
<circle r="9.5" cx="-534.069" cy="21.8876" id="preview-node-74" tabindex="0" class="svg-dot svg-dot-depart" />
<circle r="9.5" cx="-240.169" cy="375.064" id="preview-node-47" tabindex="0" class="svg-dot svg-dot-critique" />
<circle r="9.5" cx="120.693" cy="125.639" id="preview-node-35" tabindex="0" class="svg-dot svg-dot-depart" />
<circle r="9.5" cx="-30.1787" cy="38.1134" id="preview-node-219" tabindex="0" class="svg-dot svg-dot-critique" />
<circle r="9.5" cx="-304.36" cy="275.351" id="preview-node-225" tabindex="0" class="svg-dot svg-dot-echo" />
<circle r="9.5" cx="-68.8964" cy="181.352" id="preview-node-215" tabindex="0" class="svg-dot svg-dot-lecture" />
<circle r="9.5" cx="-52.5576" cy="341.756" id="preview-node-216" tabindex="0" class="svg-dot svg-dot-reflexion" />
<circle r="9.5" cx="-224.151" cy="232.047" id="preview-node-37" tabindex="0" class="svg-dot svg-dot-critique" />
<circle r="9.5" cx="-162.919" cy="286.255" id="preview-node-217" tabindex="0" class="svg-dot svg-dot-sensible" />
<circle r="9.5" cx="-573.195" cy="91.2804" id="preview-node-210" tabindex="0" class="svg-dot svg-dot-echo" />
<circle r="9.5" cx="410.381" cy="10.004" id="preview-node-1" tabindex="0" class="svg-dot svg-dot-depart" />
<circle r="9.5" cx="142.631" cy="-90.7253" id="preview-node-220" tabindex="0" class="svg-dot svg-dot-depart" />
<circle r="9.5" cx="13.071" cy="481.165" id="preview-node-46" tabindex="0" class="svg-dot svg-dot-critique" />
<circle r="9.5" cx="131.464" cy="403.256" id="preview-node-109" tabindex="0" class="svg-dot svg-dot-critique" />
<circle r="9.5" cx="-458.042" cy="354.185" id="preview-node-40" tabindex="0" class="svg-dot svg-dot-depart" />
<circle r="9.5" cx="29.4833" cy="212.526" id="preview-node-221" tabindex="0" class="svg-dot svg-dot-depart" />
<circle r="9.5" cx="564.673" cy="73.6991" id="preview-node-31" tabindex="0" class="svg-dot svg-dot-echo" />
<circle r="9.5" cx="438.838" cy="-188.239" id="preview-node-34" tabindex="0" class="svg-dot svg-dot-depart" />
<circle r="9.5" cx="546.668" cy="-134.776" id="preview-node-36" tabindex="0" class="svg-dot svg-dot-depart" />
<circle r="9.5" cx="457.216" cy="58.3389" id="preview-node-2" tabindex="0" class="svg-dot svg-dot-reflexion" />
<circle r="9.5" cx="447.942" cy="-58.0935" id="preview-node-3" tabindex="0" class="svg-dot svg-dot-lecture" />
<circle r="9.5" cx="522.003" cy="-42.9337" id="preview-node-33" tabindex="0" class="svg-dot svg-dot-kit" />
<circle r="9.5" cx="380.833" cy="-45.365" id="preview-node-226" tabindex="0" class="svg-dot svg-dot-sensible" />
<circle r="9.5" cx="169.256" cy="-203.781" id="preview-node-229" tabindex="0" class="svg-dot svg-dot-lecture" />
<circle r="9.5" cx="79.6416" cy="-84.3981" id="preview-node-230" tabindex="0" class="svg-dot svg-dot-lecture" />
<circle r="9.5" cx="100.194" cy="-203.863" id="preview-node-231" tabindex="0" class="svg-dot svg-dot-sensible" />
<circle r="9.5" cx="198.576" cy="-143.581" id="preview-node-232" tabindex="0" class="svg-dot svg-dot-dark" />
<circle r="9.5" cx="57.9056" cy="-151.741" id="preview-node-233" tabindex="0" class="svg-dot svg-dot-sensible" />
<circle r="9.5" cx="204.686" cy="-20.2418" id="preview-node-234" tabindex="0" class="svg-dot svg-dot-reflexion" />
<circle r="9.5" cx="130.131" cy="555.595" id="preview-node-106" tabindex="0" class="svg-dot svg-dot-depart" />
<circle r="9.5" cx="182.012" cy="250.526" id="preview-node-238" tabindex="0" class="svg-dot svg-dot-critique" />
<circle r="9.5" cx="267.612" cy="271.902" id="preview-node-239" tabindex="0" class="svg-dot svg-dot-critique" />
<circle r="9.5" cx="148.583" cy="484.98" id="preview-node-107" tabindex="0" class="svg-dot svg-dot-lecture" />
<circle r="9.5" cx="568.247" cy="-312.847" id="preview-node-52" tabindex="0" class="svg-dot svg-dot-echo" />
<circle r="9.5" cx="720.655" cy="54.6181" id="preview-node-54" tabindex="0" class="svg-dot svg-dot-echo" />
<circle r="9.5" cx="157.913" cy="-335.97" id="preview-node-171" tabindex="0" class="svg-dot svg-dot-depart" />
<circle r="9.5" cx="278.233" cy="-320.023" id="preview-node-235" tabindex="0" class="svg-dot svg-dot-critique" />
<circle r="9.5" cx="369.707" cy="160.517" id="preview-node-236" tabindex="0" class="svg-dot svg-dot-critique" />
<circle r="9.5" cx="2.11009" cy="641.247" id="preview-node-15" tabindex="0" class="svg-dot svg-dot-critique" />
<circle r="9.5" cx="236.041" cy="649.9" id="preview-node-105" tabindex="0" class="svg-dot svg-dot-depart" />
<circle r="9.5" cx="105.586" cy="690.194" id="preview-node-29" tabindex="0" class="svg-dot svg-dot-echo" />
<circle r="9.5" cx="287.651" cy="542.397" id="preview-node-110" tabindex="0" class="svg-dot svg-dot-critique" />
<g data-v-0135f160="" id="g201">
<rect class="svg-overlay" id="rect199" width="0" height="0" x="0" y="0" />
<!---->
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

src/pages/Home.vue
+159 -9
View File
@@ -1,21 +1,171 @@
<template>
<div class="view-home">
<div class="home-library" @click="$router.push('/library')">
<div class="wrapper" />
<b-button :to="{ name: 'library' }" variant="dark">
{{ $t('sections.library') }}
</b-button>
</div>
<div class="home-kit" @click="$router.push('/kit')">
<div class="wrapper" />
<b-button :to="{ name: 'kit' }" variant="kit">
{{ $t('sections.kit') }}
</b-button>
</div>
<div class="home-creations" @click="$router.push('/gallery')">
<div class="wrapper" />
<b-button :to="{ name: 'gallery' }" variant="creation">
{{ $t('sections.gallery') }}
</b-button>
<div
v-for="(item, i) in [['top', 'left'], ['top', 'right'], ['bottom', 'right'], ['bottom', 'left']]" :key="i"
class="home-creations-circle" :class="item"
/>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
}
},
created () {
}
name: 'Home'
}
</script>
<style lang="scss" scoped>
.view-home {
width: 100%;
height: 100%;
> div {
display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
.wrapper {
position: absolute;
opacity: 0.5;
height: 100%;
width: 100%;
pointer-events: none;
}
@include media-breakpoint-up($size-bp) {
&:not(:hover) {
.wrapper,
.btn {
display: none;
}
}
}
}
@include media-breakpoint-down($size-bp-down) {
display: flex;
flex-direction: column;
> div {
height: 100%;
}
}
@include media-breakpoint-up($size-bp) {
display: grid;
grid-template: 'a b'
'a c';
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr);
.home-library {
grid-area: a;
}
.home-kit {
grid-area: b;
}
.home-creations {
grid-area: c;
}
}
.btn {
font-family: $font-family-text;
border-color: $black;
padding: 0 1rem;
font-size: 1.75rem;
@include media-breakpoint-up($size-bp) {
font-size: 2.5rem;
}
z-index: 1;
}
.home-library {
background-image: url('~@/assets/imgs/home-library.svg');
background-size: cover;
background-position: center;
border-bottom: $line;
@include media-breakpoint-up($size-bp) {
border-bottom: 0;
border-right: $line;
}
.wrapper {
background-color: $white;
}
}
.home-kit {
background-image: url('~@/assets/imgs/home-kit.svg');
background-size: cover;
.wrapper {
background-color: lighten(theme-color('kit'), 15%);
}
}
.home-creations {
background-image: url('~@/assets/imgs/home-creations.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
border-top: $line;
@include media-breakpoint-up($size-bp) {
background-size: cover;
}
.wrapper {
background-color: theme-color('creation');
}
&-circle {
position: absolute;
z-index: -1;
width: 7vmin;
height: 7vmin;
background-color: #ccc;
border-radius: 100%;
@include media-breakpoint-up($size-bp) {
width: 10vmin;
height: 10vmin;
}
&.top {
top: 0;
}
&.bottom {
bottom: 0;
}
&.left {
left: 0;
}
&.right {
right: 0;
}
}
}
}
</style>