[Author Prev][Author Next][Thread Prev][Thread Next][Author Index][Thread Index]
[tor-commits] [styleguide/master] Add illustrations - onboarding
commit 2dda4a0dbd94f601610686451040bc37a6092612
Author: Antonela <hola@xxxxxxxxxxx>
Date: Thu Dec 5 07:29:39 2019 -0300
Add illustrations - onboarding
---
assets/static/images/onboarding/circuit.svg | 1 +
assets/static/images/onboarding/circumvention.svg | 1 +
assets/static/images/onboarding/decentralized.svg | 1 +
assets/static/images/onboarding/onion-services.svg | 1 +
assets/static/images/onboarding/protected.svg | 1 +
assets/static/images/onboarding/security.svg | 1 +
templates/visuals.html | 53 ++++++++++------------
7 files changed, 31 insertions(+), 28 deletions(-)
diff --git a/assets/static/images/onboarding/circuit.svg b/assets/static/images/onboarding/circuit.svg
new file mode 100644
index 0000000..d8714f4
--- /dev/null
+++ b/assets/static/images/onboarding/circuit.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; viewBox="0 0 300 300"><defs><style>.cls-1{fill:url(#linear-gradient);}.Graphic-Style-8{fill:url(#linear-gradient-2);}.cls-2,.cls-8{fill:#f0d4fd;}.cls-10,.cls-2,.cls-6{stroke:#65318e;}.cls-10,.cls-11,.cls-2,.cls-3,.cls-5,.cls-7,.cls-8,.cls-9{stroke-linecap:round;stroke-linejoin:round;}.cls-10,.cls-11,.cls-2,.cls-3,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{stroke-width:1.76px;}.cls-3,.cls-6{fill:#fff;}.cls-11,.cls-3,.cls-7,.cls-8,.cls-9{stroke:#490260;}.cls-4{fill:url(#linear-gradient-3);}.cls-10,.cls-5,.cls-9{fill:#65318e;}.cls-5{stroke:#f0d4fd;}.cls-6{stroke-miterlimit:10;}.cls-7{fill:#00d9b5;}.cls-11{fill:#490260;}.cls-12{fill:url(#linear-gradient-4);}</style><linearGradient id="linear-gradient" x1="-96.71" y1="206.18" x2="-95.7" y2="145.02" gradientTransform="translate(327.61 31.9)" gradientUnits="userSpaceOnUse"><stop offset="0.08" stop-color="#7e4696"/><stop offset="0.39"
stop-color="#7e4696" stop-opacity="0.61"/><stop offset="0.85" stop-color="#7e4696" stop-opacity="0"/></linearGradient><linearGradient id="linear-gradient-2" x1="73.96" y1="231.36" x2="75.25" y2="152.99" gradientTransform="translate(-14 -2)" gradientUnits="userSpaceOnUse"><stop offset="0.08" stop-color="#00d9b5"/><stop offset="0.3" stop-color="#00d9b5" stop-opacity="0.73"/><stop offset="0.8" stop-color="#00d9b5" stop-opacity="0.07"/><stop offset="0.85" stop-color="#00d9b5" stop-opacity="0"/></linearGradient><linearGradient id="linear-gradient-3" x1="119.75" y1="-30.01" x2="119.75" y2="146.52" gradientUnits="userSpaceOnUse"><stop offset="0.08" stop-color="#00d9b5"/><stop offset="0.12" stop-color="#00d9b5" stop-opacity="0.97"/><stop offset="0.19" stop-color="#00d9b5" stop-opacity="0.89"/><stop offset="0.26" stop-color="#00d9b5" stop-opacity="0.75"/><stop offset="0.35" stop-color="#00d9b5" stop-opacity="0.56"/><stop offset="0.44" stop-color="#00d9b5" stop-opacity="0.32"/><stop offset="
0.54" stop-color="#00d9b5" stop-opacity="0.03"/><stop offset="0.54" stop-color="#00d9b5" stop-opacity="0"/></linearGradient><linearGradient id="linear-gradient-4" x1="214.42" y1="44.45" x2="214.42" y2="138.96" gradientUnits="userSpaceOnUse"><stop offset="0.08" stop-color="#f0d4fd"/><stop offset="0.27" stop-color="#f0d4fd" stop-opacity="0.77"/><stop offset="0.7" stop-color="#f0d4fd" stop-opacity="0.2"/><stop offset="0.85" stop-color="#f0d4fd" stop-opacity="0"/></linearGradient></defs><title>Onboarding II Gradient 300PX</title><rect class="cls-1" x="184.27" y="169.04" width="94.22" height="79.61" transform="translate(462.76 417.68) rotate(180)"/><rect class="Graphic-Style-8" x="9.42" y="140.73" width="102.32" height="102.32" transform="translate(121.16 383.78) rotate(180)"/><path class="cls-2" d="M57,27H182.49A5.54,5.54,0,0,1,188,32.51v93.74a0,0,0,0,1,0,0H51.47a0,0,0,0,1,0,0V32.51A5.54,5.54,0,0,1,57,27Z"/><rect class="cls-3" x="59.55" y="34.87" width="120.41" height="108.53"/><rect cl
ass="cls-4" x="59.55" y="34.87" width="120.41" height="108.53"/><rect class="cls-2" x="76.5" y="146.83" width="134.33" height="10.38"/><polygon class="cls-5" points="51.47 126.25 51.47 136.54 76.5 157.21 76.5 146.83 51.47 126.25"/><rect class="cls-6" x="59.33" y="59.17" width="43.89" height="37.87"/><path class="cls-7" d="M177.05,196.61H60.43V113a2,2,0,0,1,2-2H175a2,2,0,0,1,2,2Z"/><rect class="cls-8" x="65.88" y="115.57" width="105.71" height="76.37"/><polygon class="cls-9" points="176.06 196.61 60.43 196.61 81.8 214.36 197.44 214.36 176.06 196.61"/><rect class="cls-7" x="81.8" y="214.36" width="115.11" height="8.96"/><polygon class="cls-3" points="60.43 196.61 60.43 203.65 81.8 223.32 81.8 214.36 60.43 196.61"/><path class="cls-7" d="M189.59,209H73V125.29a2.05,2.05,0,0,1,2.05-2H187.54a2.05,2.05,0,0,1,2.05,2Z"/><rect class="cls-8" x="78.42" y="127.91" width="105.71" height="76.37"/><polygon class="cls-9" points="188.73 208.95 72.96 208.95 94.33 226.7 210.1 226.7 188.73 208.95"/><rec
t class="cls-7" x="94.33" y="226.7" width="115.38" height="8.96"/><polygon class="cls-3" points="72.96 208.95 72.96 215.73 94.33 235.66 94.33 226.7 72.96 208.95"/><path class="cls-7" d="M202.12,221.29H85.5V137.63a2,2,0,0,1,2-2H200.08a2,2,0,0,1,2,2Z"/><rect class="cls-8" x="90.95" y="140.25" width="105.71" height="76.37"/><polygon class="cls-9" points="201.4 221.29 85.5 221.29 106.87 239.04 222.77 239.04 201.4 221.29"/><rect class="cls-7" x="106.87" y="239.04" width="115.64" height="8.96"/><polygon class="cls-3" points="85.5 221.29 85.5 227.8 106.87 248 106.87 239.04 85.5 221.29"/><path class="cls-7" d="M214.66,233.63H98V150a2,2,0,0,1,2-2H212.61a2,2,0,0,1,2,2Z"/><rect class="cls-8" x="103.49" y="152.59" width="105.71" height="76.37"/><polygon class="cls-9" points="214.06 233.63 98.03 233.63 119.4 251.38 235.43 251.38 214.06 233.63"/><rect class="cls-7" x="119.4" y="251.38" width="115.9" height="8.96"/><polygon class="cls-3" points="98.03 233.63 98.03 239.88 119.4 260.34 119.4 251.38
98.03 233.63"/><path class="cls-7" d="M227.19,246H110.57V162.31a2,2,0,0,1,2-2H225.15a2,2,0,0,1,2,2Z"/><rect class="cls-8" x="116.02" y="164.93" width="105.71" height="76.37"/><polygon class="cls-9" points="226.73 245.97 110.57 245.97 131.94 263.72 248.1 263.72 226.73 245.97"/><rect class="cls-7" x="131.94" y="263.72" width="116.16" height="8.96"/><polygon class="cls-3" points="110.57 245.97 110.57 251.96 131.94 271.68 131.94 263.72 110.57 245.97"/><path class="cls-7" d="M244.52,260.67H127.9V177a2,2,0,0,1,2-2H242.48a2,2,0,0,1,2,2Z"/><rect class="cls-8" x="133.36" y="179.64" width="105.71" height="76.37"/><polygon class="cls-9" points="244.06 260.67 127.9 260.67 149.27 278.43 265.43 278.43 244.06 260.67"/><rect class="cls-7" x="149.27" y="278.43" width="116.16" height="8.96"/><rect class="cls-10" x="59.33" y="59.89" width="41.01" height="38.59"/><rect class="cls-10" x="66.24" y="59.89" width="34.1" height="30.04"/><path class="cls-7" d="M149.62,84.81V177H278.49V84.81a6.88,6.88,0,0,0-6
.88-6.88H156.5A6.88,6.88,0,0,0,149.62,84.81ZM272.46,168.2H155.65V87.41H272.46Z"/><polygon class="cls-8" points="276.38 176.95 149.62 176.95 173.24 196.57 300 196.57 276.38 176.95"/><rect class="cls-7" x="173.24" y="196.57" width="126.76" height="9.9"/><polygon class="cls-11" points="149.62 176.95 149.62 186.76 173.24 206.47 173.24 196.57 149.62 176.95"/><rect class="cls-6" x="156.37" y="87.41" width="116.09" height="80.79"/><rect class="cls-12" x="156.37" y="87.41" width="116.09" height="80.79"/><rect class="cls-11" x="156.37" y="87.41" width="1.72" height="80.79"/><path class="cls-7" d="M4.78,53.13H118a4.78,4.78,0,0,1,4.78,4.78v87.73a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V57.9A4.78,4.78,0,0,1,4.78,53.13Z"/><rect class="cls-3" x="8.05" y="60.34" width="106.66" height="76.63"/><polygon class="cls-8" points="120.75 145.63 0 145.63 22.5 164.32 143.24 164.32 120.75 145.63"/><rect class="cls-7" x="22.5" y="164.32" width="120.75" height="9.43"/><polygon class="cls-11" points="0 145.63 0 154.97 22.
5 173.75 22.5 164.32 0 145.63"/><rect class="cls-3" x="8.82" y="61.75" width="104.98" height="74.01"/><rect class="cls-3" x="8.82" y="61.75" width="104.98" height="74.01"/><path class="cls-8" d="M57.1,61.75h57.26a0,0,0,0,1,0,0v66.4a0,0,0,0,1,0,0H64.3A7.19,7.19,0,0,1,57.1,121V61.75A0,0,0,0,1,57.1,61.75Z"/><rect class="cls-8" x="68.28" y="61.43" width="46.09" height="53.39"/><path class="cls-11" d="M8.05,136.21V60.34h3.2V133A3.2,3.2,0,0,1,8.05,136.21Z"/><polygon class="cls-3" points="131.94 272.68 149.27 287.39 149.27 278.43 131.94 263.72 131.94 272.68"/></svg>
\ No newline at end of file
diff --git a/assets/static/images/onboarding/circumvention.svg b/assets/static/images/onboarding/circumvention.svg
new file mode 100644
index 0000000..ff84dbe
--- /dev/null
+++ b/assets/static/images/onboarding/circumvention.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; viewBox="0 0 300 300"><defs><style>.cls-1,.cls-16,.cls-4{fill:none;}.cls-2{fill:#3d2f82;}.cls-12,.cls-3{fill:#fff;}.cls-11,.cls-12,.cls-13,.cls-16,.cls-17,.cls-4,.cls-6,.cls-7{stroke:#490260;}.Graphic-Style-9,.cls-12,.cls-4{stroke-miterlimit:10;}.Graphic-Style-9,.cls-10,.cls-11,.cls-12,.cls-16,.cls-17,.cls-4,.cls-6,.cls-7{stroke-width:1.81px;}.Graphic-Style-9,.cls-10{stroke:#7d4696;}.Graphic-Style-9{fill:url(#linear-gradient);}.cls-5{fill:#490260;}.cls-10,.cls-6{fill:#f0d4fd;}.cls-10,.cls-11,.cls-13,.cls-16,.cls-17,.cls-6,.cls-7{stroke-linecap:round;stroke-linejoin:round;}.cls-14,.cls-7{fill:#00d9b5;}.cls-8{opacity:0.47;fill:url(#_10_dpi_40_6);}.cls-9{fill:url(#linear-gradient-2);}.cls-11,.cls-15{fill:#7d4696;}.cls-13{stroke-width:1.76px;fill:url(#radial-gradient);}.Graphic-Style-10{fill:url(#radial-gradient-2);}.cls-17{fill:url(#radial-gradient-3);}</style><linearGrad
ient id="linear-gradient" x1="229.22" y1="180.8" x2="229.22" y2="135.51" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#00d9b5"/><stop offset="0.1" stop-color="#05dab7"/><stop offset="0.22" stop-color="#15dcbb"/><stop offset="0.36" stop-color="#2fe0c3"/><stop offset="0.51" stop-color="#53e5cd"/><stop offset="0.66" stop-color="#81ecda"/><stop offset="0.82" stop-color="#b9f5eb"/><stop offset="0.99" stop-color="#fafefe"/><stop offset="1" stop-color="#fff"/></linearGradient><pattern id="_10_dpi_40_6" data-name="10 dpi 40% 6" width="28.8" height="28.8" patternTransform="translate(98.76 498.63) scale(0.43)" patternUnits="userSpaceOnUse" viewBox="0 0 28.8 28.8"><rect class="cls-1" width="28.8" height="28.8"/><path class="cls-2" d="M28.8,31.68a2.88,2.88,0,1,0-2.88-2.88A2.88,2.88,0,0,0,28.8,31.68Z"/><path class="cls-2" d="M14.4,31.68a2.88,2.88,0,1,0-2.88-2.88A2.88,2.88,0,0,0,14.4,31.68Z"/><path class="cls-2" d="M28.8,17.28a2.88,2.88,0,1,0-2.88-2.88A2.88,2.88,0,0,0,28.8,17.28Z"/
><path class="cls-2" d="M14.4,17.28a2.88,2.88,0,1,0-2.88-2.88A2.88,2.88,0,0,0,14.4,17.28Z"/><path class="cls-2" d="M7.2,24.48A2.88,2.88,0,1,0,4.32,21.6,2.88,2.88,0,0,0,7.2,24.48Z"/><path class="cls-2" d="M21.6,24.48a2.88,2.88,0,1,0-2.88-2.88A2.88,2.88,0,0,0,21.6,24.48Z"/><path class="cls-2" d="M7.2,10.08A2.88,2.88,0,1,0,4.32,7.2,2.88,2.88,0,0,0,7.2,10.08Z"/><path class="cls-2" d="M21.6,10.08A2.88,2.88,0,1,0,18.72,7.2,2.88,2.88,0,0,0,21.6,10.08Z"/><path class="cls-2" d="M0,31.68A2.88,2.88,0,0,0,2.88,28.8,2.88,2.88,0,0,0,0,25.92a2.88,2.88,0,0,0,0,5.76Z"/><path class="cls-2" d="M0,17.28A2.88,2.88,0,0,0,2.88,14.4,2.88,2.88,0,0,0,0,11.52a2.88,2.88,0,0,0,0,5.76Z"/><path class="cls-2" d="M28.8,2.88A2.88,2.88,0,0,0,31.68,0a2.88,2.88,0,0,0-5.76,0A2.88,2.88,0,0,0,28.8,2.88Z"/><path class="cls-2" d="M14.4,2.88A2.88,2.88,0,0,0,17.28,0a2.88,2.88,0,0,0-5.76,0A2.88,2.88,0,0,0,14.4,2.88Z"/><path class="cls-2" d="M0,2.88A2.88,2.88,0,0,0,2.88,0,2.88,2.88,0,0,0,0-2.88,2.88,2.88,0,0,0-2.88,0,2.88,2.88,
0,0,0,0,2.88Z"/></pattern><linearGradient id="linear-gradient-2" x1="148.27" y1="171.12" x2="149.36" y2="104.65" gradientUnits="userSpaceOnUse"><stop offset="0.08" stop-color="#490260"/><stop offset="0.22" stop-color="#490260" stop-opacity="0.93"/><stop offset="0.42" stop-color="#490260" stop-opacity="0.73"/><stop offset="0.67" stop-color="#490260" stop-opacity="0.41"/><stop offset="0.91" stop-color="#490260" stop-opacity="0"/></linearGradient><radialGradient id="radial-gradient" cx="157.65" cy="208.58" r="66" gradientTransform="translate(470.51 50.92) rotate(90) scale(1 1.5)" gradientUnits="userSpaceOnUse"><stop offset="0.29" stop-color="#00d9b5"/><stop offset="0.39" stop-color="#05d4b4"/><stop offset="0.51" stop-color="#12c4b1"/><stop offset="0.65" stop-color="#28aaab"/><stop offset="0.79" stop-color="#4687a4"/><stop offset="0.94" stop-color="#6d599a"/><stop offset="1" stop-color="#7d4696"/></radialGradient><radialGradient id="radial-gradient-2" cx="85.05" cy="243.56" r="44.61" gr
adientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#radial-gradient"/><radialGradient id="radial-gradient-3" cx="206.98" cy="257.24" r="31.01" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#radial-gradient"/></defs><title>Onboarding II Gradient 300PX</title><path class="cls-3" d="M35.12,299.5H269.91l1.21-13.41c-14.75,0-14.75-4.13-29.5-4.13s-14.75,4.13-29.5,4.13S197.37,282,182.62,282s-14.75,4.13-29.49,4.13S138.38,282,123.63,282s-14.75,4.13-29.5,4.13S79.37,282,64.62,282s-14.75,4.13-29.5,4.13"/><path class="cls-4" d="M35.12,299.5H269.91l1.21-13.41c-14.75,0-14.75-4.13-29.5-4.13s-14.75,4.13-29.5,4.13S197.37,282,182.62,282s-14.75,4.13-29.49,4.13S138.38,282,123.63,282s-14.75,4.13-29.5,4.13S79.37,282,64.62,282s-14.75,4.13-29.5,4.13"/><path class="Graphic-Style-9" d="M162.75,153.77H295.69s-2.55-25.7-59.11-18.77c0,0,12.15-21.18-16.47-25.92S165.58,132.55,162.75,153.77Z"/><polygon class="cls-5" points="215.5 141.72 76.08 141.72 76.08 38.54 215.5 39.27 215.5 141.72"/><rect class="
cls-6" x="79.88" y="39.27" width="139.42" height="102.45"/><rect class="cls-7" x="88.59" y="47.02" width="122.01" height="86.21"/><rect class="cls-8" x="88.59" y="47.02" width="122.01" height="86.21"/><rect class="cls-9" x="88.59" y="47.02" width="122.01" height="86.21"/><polygon class="cls-5" points="76.24 140.26 76.24 154.51 105.43 177.29 105.43 162.94 76.24 140.26"/><rect class="cls-10" x="105.43" y="162.95" width="137.15" height="13.62"/><polygon class="cls-11" points="217.75 141.72 79.15 141.72 105.43 162.94 243.31 162.94 217.75 141.72"/><circle class="cls-6" cx="145.06" cy="32.17" r="6.26"/><polygon class="cls-11" points="172.73 31.23 126.96 31.23 124.15 39.12 175.54 39.12 172.73 31.23"/><rect class="cls-6" x="145.43" y="12" width="8.49" height="19.22" transform="translate(299.35 43.23) rotate(-180)"/><rect class="cls-6" x="145.43" y="12" width="4.25" height="19.22" transform="translate(295.1 43.23) rotate(-180)"/><rect class="cls-6" x="135.76" y="13.2" width="28.17" height="8
.23" transform="translate(299.69 34.63) rotate(-180)"/><rect class="cls-12" x="135.76" y="13.2" width="28.17" height="4.11" transform="translate(299.69 30.51) rotate(-180)"/><ellipse class="cls-12" cx="149.67" cy="12.53" rx="108.15" ry="4.79"/><path class="cls-6" d="M153.59,10.88c0-4.12-1.76-6.28-3.92-6.28s-3.91,2.16-3.91,6.28Z"/><path class="Graphic-Style-9" d="M55.37,110.91H193.59S179.66,82.6,132.81,89.2c0,0,6.92-16.29-20-20.62a49.7,49.7,0,0,0-24.74,2.49c-16,5.6-19.85,12.67-34.3,21.64A128.12,128.12,0,0,1-.31,110.91H55.37Z"/><path class="cls-13" d="M147.86,195.71h-6.1a10.18,10.18,0,1,0,0,20.36H147v73.47c0,5.62,4.56,7.28,10.18,7.28s10.19-1.66,10.19-7.28V215.42A19.75,19.75,0,0,0,147.86,195.71Z"/><ellipse class="cls-12" cx="136.49" cy="206.2" rx="5.75" ry="7.7"/><path class="cls-14" d="M136.49,223.56c-9.26,0-16.8-7.79-16.8-17.36s7.54-17.36,16.8-17.36,16.81,7.79,16.81,17.36S145.76,223.56,136.49,223.56Z"/><path class="cls-5" d="M136.49,189.74c8.78,0,15.9,7.37,15.9,16.46s-7.12,16.45-15.9
,16.45-15.89-7.36-15.89-16.45,7.11-16.46,15.89-16.46m0-1.81c-9.76,0-17.7,8.2-17.7,18.27s7.94,18.26,17.7,18.26,17.71-8.19,17.71-18.26-7.94-18.27-17.71-18.27Z"/><ellipse class="cls-15" cx="136.15" cy="206.2" rx="11.12" ry="11.51"/><ellipse class="cls-16" cx="136.15" cy="206.2" rx="11.12" ry="11.51"/><path class="cls-2" d="M139.2,217.27a10.61,10.61,0,0,1-3,.44,11.52,11.52,0,0,1,0-23,10.61,10.61,0,0,1,3,.45,11.62,11.62,0,0,0,0,22.14Z"/><path class="cls-16" d="M139.2,217.27a10.61,10.61,0,0,1-3,.44,11.52,11.52,0,0,1,0-23,10.61,10.61,0,0,1,3,.45,11.62,11.62,0,0,0,0,22.14Z"/><path class="cls-3" d="M271.12,274c-14.75,0-14.75-4.12-29.5-4.12S226.87,274,212.12,274s-14.75-4.12-29.5-4.12S167.87,274,153.13,274s-14.75-4.12-29.5-4.12S108.88,274,94.13,274s-14.76-4.12-29.51-4.12S49.87,274,35.12,274v26H272.57Z"/><path class="cls-4" d="M271.12,274c-14.75,0-14.75-4.12-29.5-4.12S226.87,274,212.12,274s-14.75-4.12-29.5-4.12S167.87,274,153.13,274s-14.75-4.12-29.5-4.12S108.88,274,94.13,274s-14.76-4.12-29.51-4
.12S49.87,274,35.12,274"/><path class="Graphic-Style-10" d="M77.64,298.43c-4.38,0-9.4-.74-9.4-6.5V234.05A17.37,17.37,0,0,1,85.59,216.7h4.88a9.4,9.4,0,0,1,0,18.79H87v56.44C87,297.69,82,298.43,77.64,298.43Z"/><path class="cls-5" d="M90.47,217.61a8.49,8.49,0,0,1,0,17H86.12v57.35c0,4.69-3.8,5.59-8.48,5.59s-8.49-.9-8.49-5.59V234.05a16.45,16.45,0,0,1,16.44-16.44h4.88m-4.89,17h0m4.89-18.78H85.59a18.27,18.27,0,0,0-18.25,18.25v57.88a6.47,6.47,0,0,0,3.45,6.16c1.63.86,3.74,1.24,6.85,1.24s5.21-.38,6.84-1.24a6.47,6.47,0,0,0,3.45-6.16V236.39h2.54a10.3,10.3,0,0,0,0-20.59Z"/><circle class="cls-12" cx="90.98" cy="226.36" r="6.42"/><circle class="cls-14" cx="90.98" cy="226.36" r="16.23"/><path class="cls-5" d="M91,211a15.32,15.32,0,1,1-15.33,15.32A15.32,15.32,0,0,1,91,211m0-1.81a17.13,17.13,0,1,0,17.13,17.13A17.15,17.15,0,0,0,91,209.23Z"/><circle class="cls-15" cx="91.3" cy="226.36" r="10.72"/><circle class="cls-16" cx="91.3" cy="226.36" r="10.72"/><path class="cls-2" d="M88.59,236.64a10.61,10.61,0,0
,0,3,.44,10.72,10.72,0,0,0,0-21.44,11,11,0,0,0-3,.44,10.72,10.72,0,0,1,0,20.56Z"/><path class="cls-16" d="M88.59,236.64a10.61,10.61,0,0,0,3,.44,10.72,10.72,0,0,0,0-21.44,11,11,0,0,0-3,.44,10.72,10.72,0,0,1,0,20.56Z"/><path class="cls-17" d="M196.67,291.25V244.5a19.74,19.74,0,0,1,19.72-19.71h5.85a10.18,10.18,0,1,1,0,20.35H217v46.11c0,5.62-4.55,7.28-10.18,7.28S196.67,296.87,196.67,291.25Zm19.71-46.11h0Z"/><ellipse class="cls-12" cx="227.5" cy="235.28" rx="5.75" ry="7.7"/><ellipse class="cls-12" cx="225.32" cy="235.28" rx="5.75" ry="7.7"/><path class="cls-14" d="M225.32,252.64c-9.26,0-16.8-7.78-16.8-17.35s7.54-17.36,16.8-17.36,16.8,7.78,16.8,17.36S234.59,252.64,225.32,252.64Z"/><path class="cls-5" d="M225.32,218.83c8.78,0,15.9,7.37,15.9,16.45s-7.12,16.46-15.9,16.46-15.89-7.37-15.89-16.46,7.11-16.45,15.89-16.45m0-1.81c-9.76,0-17.71,8.19-17.71,18.26s7.95,18.27,17.71,18.27S243,245.36,243,235.28,235.09,217,225.32,217Z"/><ellipse class="cls-15" cx="225.71" cy="235.28" rx="11.12" ry="11.51"/
><ellipse class="cls-16" cx="225.71" cy="235.28" rx="11.12" ry="11.51"/><path class="cls-2" d="M236.83,235.29a11.33,11.33,0,0,1-11.12,11.51,10.36,10.36,0,0,1-3.07-.45,11.63,11.63,0,0,0,0-22.13,10.36,10.36,0,0,1,3.07-.45A11.33,11.33,0,0,1,236.83,235.29Z"/><path class="cls-16" d="M236.83,235.29a11.33,11.33,0,0,1-11.12,11.51,10.36,10.36,0,0,1-3.07-.45,11.63,11.63,0,0,0,0-22.13,10.36,10.36,0,0,1,3.07-.45A11.33,11.33,0,0,1,236.83,235.29Z"/><path class="cls-3" d="M27.84,299.45H277.19l1.2-13.36c-14.75,0-22-4.13-36.77-4.13s-14.75,4.13-29.5,4.13S197.37,282,182.62,282s-14.75,4.13-29.49,4.13S138.38,282,123.63,282s-14.75,4.13-29.5,4.13S79.37,282,64.62,282s-22,4.13-36.78,4.13"/><path class="cls-4" d="M278.39,286.09c-14.75,0-22-4.13-36.77-4.13s-14.75,4.13-29.5,4.13S197.37,282,182.62,282s-14.75,4.13-29.49,4.13S138.38,282,123.63,282s-14.75,4.13-29.5,4.13S79.37,282,64.62,282s-22,4.13-36.78,4.13"/></svg>
\ No newline at end of file
diff --git a/assets/static/images/onboarding/decentralized.svg b/assets/static/images/onboarding/decentralized.svg
new file mode 100644
index 0000000..d5daa11
--- /dev/null
+++ b/assets/static/images/onboarding/decentralized.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; viewBox="0 0 300 314.86"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-14,.cls-2,.cls-8{fill:#f0d4fd;}.cls-11,.cls-12,.cls-14,.cls-15,.cls-18,.cls-19,.cls-2,.cls-24,.cls-31,.cls-32,.cls-6{stroke:#490260;}.cls-10,.cls-11,.cls-12,.cls-15,.cls-2,.cls-28,.cls-6{stroke-miterlimit:10;}.cls-10,.cls-11,.cls-12,.cls-14,.cls-15,.cls-18,.cls-19,.cls-2,.cls-24,.cls-28,.cls-31,.cls-32,.cls-6{stroke-width:1.76px;}.cls-3,.cls-32,.cls-6{fill:#00d9b5;}.cls-15,.cls-31,.cls-4{fill:none;}.cls-11,.cls-24,.cls-28,.cls-5{fill:#7e4696;}.cls-7{fill:#009980;}.Graphic-Style-8{fill:url(#linear-gradient-2);}.cls-9{clip-path:url(#clip-path);}.cls-10,.cls-12,.cls-19,.cls-27{fill:#fff;}.cls-10{stroke:#65318e;}.cls-13{fill:url(#linear-gradient-3);}.cls-14,.cls-18,.cls-19,.cls-24,.cls-31,.cls-32{stroke-linecap:round;stroke-linejoin:round;}.cls-16{clip-path:url(#clip-path-2);}.cls-17,.cls-26,.cls
-33{opacity:0.52;}.cls-17{fill:url(#_10_dpi_40_7);}.cls-18,.cls-22{fill:#490260;}.cls-20{clip-path:url(#clip-path-3);}.cls-21{fill:url(#linear-gradient-4);}.cls-23{clip-path:url(#clip-path-4);}.cls-25{clip-path:url(#clip-path-5);}.cls-26{fill:url(#_10_dpi_40_7-3);}.cls-28{stroke:#7e4696;}.cls-29{mask:url(#mask);}.cls-30{fill:#7d4696;}.cls-33{fill:url(#_10_dpi_40_7-5);}.cls-34{clip-path:url(#clip-path-6);}.cls-35{filter:url(#luminosity-invert);}</style><linearGradient id="linear-gradient" x1="-13579.58" y1="-1708.96" x2="-13577.66" y2="-1826.04" gradientTransform="translate(25752.36 1171.03) scale(1.89 0.58)" gradientUnits="userSpaceOnUse"><stop offset="0.08"/><stop offset="0.21" stop-color="#373839"/><stop offset="0.33" stop-color="#6e7072"/><stop offset="0.85" stop-color="#fff"/></linearGradient><linearGradient id="linear-gradient-2" x1="200.1" y1="263.3" x2="201.25" y2="193.63" gradientTransform="translate(0 20)" gradientUnits="userSpaceOnUse"><stop offset="0.08" stop-color="#00d9
b5"/><stop offset="0.3" stop-color="#00d9b5" stop-opacity="0.73"/><stop offset="0.8" stop-color="#00d9b5" stop-opacity="0.07"/><stop offset="0.85" stop-color="#00d9b5" stop-opacity="0"/></linearGradient><clipPath id="clip-path"><rect class="cls-2" x="144.17" y="66.43" width="142.43" height="167.06"/></clipPath><linearGradient id="linear-gradient-3" x1="191.87" y1="79.31" x2="191.87" y2="172.51" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#linear-gradient-2"/><clipPath id="clip-path-2"><rect class="cls-3" x="207.6" y="17.24" width="91.12" height="108.4"/></clipPath><pattern id="_10_dpi_40_7" data-name="10 dpi 40% 7" width="28.8" height="28.8" patternTransform="translate(37.03 61.94) scale(0.43)" patternUnits="userSpaceOnUse" viewBox="0 0 28.8 28.8"><rect class="cls-4" width="28.8" height="28.8"/><path class="cls-7" d="M28.8,31.68a2.88,2.88,0,1,0-2.88-2.88A2.88,2.88,0,0,0,28.8,31.68Z"/><path class="cls-7" d="M14.4,31.68a2.88,2.88,0,1,0-2.88-2.88A2.88,2.88,0,0,0,14.4,31.68
Z"/><path class="cls-7" d="M28.8,17.28a2.88,2.88,0,1,0-2.88-2.88A2.88,2.88,0,0,0,28.8,17.28Z"/><path class="cls-7" d="M14.4,17.28a2.88,2.88,0,1,0-2.88-2.88A2.88,2.88,0,0,0,14.4,17.28Z"/><path class="cls-7" d="M7.2,24.48A2.88,2.88,0,1,0,4.32,21.6,2.88,2.88,0,0,0,7.2,24.48Z"/><path class="cls-7" d="M21.6,24.48a2.88,2.88,0,1,0-2.88-2.88A2.88,2.88,0,0,0,21.6,24.48Z"/><path class="cls-7" d="M7.2,10.08A2.88,2.88,0,1,0,4.32,7.2,2.88,2.88,0,0,0,7.2,10.08Z"/><path class="cls-7" d="M21.6,10.08A2.88,2.88,0,1,0,18.72,7.2,2.88,2.88,0,0,0,21.6,10.08Z"/><path class="cls-7" d="M0,31.68A2.88,2.88,0,0,0,2.88,28.8,2.88,2.88,0,0,0,0,25.92a2.88,2.88,0,0,0,0,5.76Z"/><path class="cls-7" d="M0,17.28A2.88,2.88,0,0,0,2.88,14.4,2.88,2.88,0,0,0,0,11.52a2.88,2.88,0,0,0,0,5.76Z"/><path class="cls-7" d="M28.8,2.88A2.88,2.88,0,0,0,31.68,0a2.88,2.88,0,0,0-5.76,0A2.88,2.88,0,0,0,28.8,2.88Z"/><path class="cls-7" d="M14.4,2.88A2.88,2.88,0,0,0,17.28,0a2.88,2.88,0,0,0-5.76,0A2.88,2.88,0,0,0,14.4,2.88Z"/><path class="cls
-7" d="M0,2.88A2.88,2.88,0,0,0,2.88,0,2.88,2.88,0,0,0,0-2.88,2.88,2.88,0,0,0-2.88,0,2.88,2.88,0,0,0,0,2.88Z"/></pattern><clipPath id="clip-path-3"><rect class="cls-4" x="208.15" y="16.33" width="91.85" height="109.13"/></clipPath><linearGradient id="linear-gradient-4" x1="220.65" y1="2.31" x2="220.65" y2="117.17" gradientUnits="userSpaceOnUse"><stop offset="0.08" stop-color="#7e4696"/><stop offset="0.39" stop-color="#7e4696" stop-opacity="0.61"/><stop offset="0.85" stop-color="#7e4696" stop-opacity="0"/></linearGradient><clipPath id="clip-path-4"><rect class="cls-5" x="41.32" y="115.78" width="121.52" height="161.6"/></clipPath><clipPath id="clip-path-5"><rect class="cls-6" x="41.32" y="114.25" width="121.52" height="161.6"/></clipPath><pattern id="_10_dpi_40_7-3" data-name="10 dpi 40% 7" width="28.8" height="28.8" patternTransform="translate(120.22 155.03) scale(0.45)" patternUnits="userSpaceOnUse" viewBox="0 0 28.8 28.8"><rect class="cls-4" width="28.8" height="28.8"/><path class=
"cls-7" d="M28.8,31.68a2.88,2.88,0,1,0-2.88-2.88A2.88,2.88,0,0,0,28.8,31.68Z"/><path class="cls-7" d="M14.4,31.68a2.88,2.88,0,1,0-2.88-2.88A2.88,2.88,0,0,0,14.4,31.68Z"/><path class="cls-7" d="M28.8,17.28a2.88,2.88,0,1,0-2.88-2.88A2.88,2.88,0,0,0,28.8,17.28Z"/><path class="cls-7" d="M14.4,17.28a2.88,2.88,0,1,0-2.88-2.88A2.88,2.88,0,0,0,14.4,17.28Z"/><path class="cls-7" d="M7.2,24.48A2.88,2.88,0,1,0,4.32,21.6,2.88,2.88,0,0,0,7.2,24.48Z"/><path class="cls-7" d="M21.6,24.48a2.88,2.88,0,1,0-2.88-2.88A2.88,2.88,0,0,0,21.6,24.48Z"/><path class="cls-7" d="M7.2,10.08A2.88,2.88,0,1,0,4.32,7.2,2.88,2.88,0,0,0,7.2,10.08Z"/><path class="cls-7" d="M21.6,10.08A2.88,2.88,0,1,0,18.72,7.2,2.88,2.88,0,0,0,21.6,10.08Z"/><path class="cls-7" d="M0,31.68A2.88,2.88,0,0,0,2.88,28.8,2.88,2.88,0,0,0,0,25.92a2.88,2.88,0,0,0,0,5.76Z"/><path class="cls-7" d="M0,17.28A2.88,2.88,0,0,0,2.88,14.4,2.88,2.88,0,0,0,0,11.52a2.88,2.88,0,0,0,0,5.76Z"/><path class="cls-7" d="M28.8,2.88A2.88,2.88,0,0,0,31.68,0a2.88,2.88,0,
0,0-5.76,0A2.88,2.88,0,0,0,28.8,2.88Z"/><path class="cls-7" d="M14.4,2.88A2.88,2.88,0,0,0,17.28,0a2.88,2.88,0,0,0-5.76,0A2.88,2.88,0,0,0,14.4,2.88Z"/><path class="cls-7" d="M0,2.88A2.88,2.88,0,0,0,2.88,0,2.88,2.88,0,0,0,0-2.88,2.88,2.88,0,0,0-2.88,0,2.88,2.88,0,0,0,0,2.88Z"/></pattern><filter id="luminosity-invert" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feColorMatrix values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"/></filter><mask id="mask" x="-90.76" y="88.19" width="331.4" height="164.09" maskUnits="userSpaceOnUse"><g class="cls-35"><rect class="cls-1" x="-89.66" y="92.46" width="329.19" height="88.92" transform="translate(146.29 275.76) rotate(-178.51)"/></g></mask><pattern id="_10_dpi_40_7-5" data-name="10 dpi 40% 7" width="28.8" height="28.8" patternTransform="translate(34.23 12.88) scale(0.43)" patternUnits="userSpaceOnUse" viewBox="0 0 28.8 28.8"><rect class="cls-4" width="28.8" height="28.8"/><path class="cls-7" d="M28.8,31.68a2.88,2.88,0,1,0-2.8
8-2.88A2.88,2.88,0,0,0,28.8,31.68Z"/><path class="cls-7" d="M14.4,31.68a2.88,2.88,0,1,0-2.88-2.88A2.88,2.88,0,0,0,14.4,31.68Z"/><path class="cls-7" d="M28.8,17.28a2.88,2.88,0,1,0-2.88-2.88A2.88,2.88,0,0,0,28.8,17.28Z"/><path class="cls-7" d="M14.4,17.28a2.88,2.88,0,1,0-2.88-2.88A2.88,2.88,0,0,0,14.4,17.28Z"/><path class="cls-7" d="M7.2,24.48A2.88,2.88,0,1,0,4.32,21.6,2.88,2.88,0,0,0,7.2,24.48Z"/><path class="cls-7" d="M21.6,24.48a2.88,2.88,0,1,0-2.88-2.88A2.88,2.88,0,0,0,21.6,24.48Z"/><path class="cls-7" d="M7.2,10.08A2.88,2.88,0,1,0,4.32,7.2,2.88,2.88,0,0,0,7.2,10.08Z"/><path class="cls-7" d="M21.6,10.08A2.88,2.88,0,1,0,18.72,7.2,2.88,2.88,0,0,0,21.6,10.08Z"/><path class="cls-7" d="M0,31.68A2.88,2.88,0,0,0,2.88,28.8,2.88,2.88,0,0,0,0,25.92a2.88,2.88,0,0,0,0,5.76Z"/><path class="cls-7" d="M0,17.28A2.88,2.88,0,0,0,2.88,14.4,2.88,2.88,0,0,0,0,11.52a2.88,2.88,0,0,0,0,5.76Z"/><path class="cls-7" d="M28.8,2.88A2.88,2.88,0,0,0,31.68,0a2.88,2.88,0,0,0-5.76,0A2.88,2.88,0,0,0,28.8,2.88Z"/><p
ath class="cls-7" d="M14.4,2.88A2.88,2.88,0,0,0,17.28,0a2.88,2.88,0,0,0-5.76,0A2.88,2.88,0,0,0,14.4,2.88Z"/><path class="cls-7" d="M0,2.88A2.88,2.88,0,0,0,2.88,0,2.88,2.88,0,0,0,0-2.88,2.88,2.88,0,0,0-2.88,0,2.88,2.88,0,0,0,0,2.88Z"/></pattern><clipPath id="clip-path-6"><rect class="cls-4" x="13.15" y="48.83" width="94.91" height="112.48"/></clipPath></defs><title>Onboarding II Gradient 300PX</title><rect class="Graphic-Style-8" x="122.65" y="205.05" width="156" height="89.89" transform="translate(401.3 499.98) rotate(180)"/><rect class="cls-8" x="144.17" y="66.43" width="142.43" height="167.06"/><g class="cls-9"><polygon class="cls-10" points="343.98 247.42 142.43 247.42 142.43 179.69 312.52 179.69 343.98 247.42"/><rect class="cls-11" x="137.89" y="101.07" width="112.57" height="90.07"/><rect class="cls-12" x="142.94" y="113.35" width="97.86" height="66.58"/><rect class="cls-13" x="142.94" y="113.35" width="97.86" height="66.58"/><polygon class="cls-11" points="251.77 191.14 137.89
191.14 157.68 207.58 271.55 207.58 251.77 191.14"/><rect class="cls-14" x="157.68" y="207.58" width="113.87" height="8.29"/><polygon class="cls-12" points="157.68 207.58 157.68 215.87 137.89 199.36 137.89 191.15 157.68 207.58"/></g><rect class="cls-15" x="144.17" y="66.43" width="142.43" height="167.06"/><rect class="cls-3" x="207.6" y="17.24" width="91.12" height="108.4"/><g class="cls-16"><rect class="cls-17" x="207.6" y="17.24" width="91.12" height="108.4"/><polygon class="cls-12" points="264.46 155.83 163.47 155.83 182.28 171.46 283.27 171.46 264.46 155.83"/><rect class="cls-12" x="182.29" y="171.46" width="100.99" height="7.88"/><polygon class="cls-12" points="182.29 171.46 182.29 179.34 163.47 163.64 163.47 155.83 182.29 171.46"/></g><polygon class="cls-18" points="193.84 138.18 207.6 125.69 207.6 17.24 193.84 34.83 193.84 138.18"/><polygon class="cls-19" points="195.26 138.54 208.1 125.87 299.04 125.87 274.88 138.54 195.26 138.54"/><g class="cls-20"><rect class="cls-12" x="1
65.17" y="48.65" width="116.64" height="90.24"/><rect class="cls-2" x="170.51" y="59.54" width="100.27" height="70.73"/><rect class="cls-21" x="170.51" y="59.54" width="100.27" height="70.73"/><rect class="cls-22" x="267.94" y="59.54" width="2.84" height="70.73" transform="translate(538.72 189.8) rotate(-180)"/><polygon class="cls-14" points="169.47 138.89 281.81 138.89 260.88 156.28 148.54 156.28 169.47 138.89"/><rect class="cls-14" x="148.54" y="156.28" width="112.33" height="8.77"/><polygon class="cls-14" points="260.88 156.28 260.88 165.04 281.81 147.58 281.81 138.89 260.88 156.28"/></g><rect class="cls-15" x="207.6" y="17.24" width="91.12" height="108.4"/><rect class="cls-5" x="41.32" y="115.78" width="121.52" height="161.6"/><g class="cls-23"><rect class="cls-24" x="105.09" y="149.93" width="110.27" height="83.93"/><rect class="cls-12" x="112.45" y="158.85" width="97.86" height="66.87"/><polygon class="cls-24" points="211.3 233.87 105.1 233.87 124.88 250.3 231.08 250.3 211.3 2
33.87"/><rect class="cls-14" x="124.88" y="250.3" width="106.2" height="8.29"/><polygon class="cls-14" points="124.88 250.3 124.88 258.59 105.09 242.08 105.09 233.87 124.88 250.3"/></g><rect class="cls-3" x="41.32" y="114.25" width="121.52" height="161.6"/><g class="cls-25"><rect class="cls-26" x="33.64" y="236.59" width="129.19" height="39.26"/><polygon class="cls-24" points="201.63 250.08 33.65 250.08 33.65 206.59 151.14 206.59 201.63 250.08"/><rect class="cls-27" x="105.09" y="148.4" width="110.27" height="83.93"/><rect class="cls-15" x="105.09" y="148.4" width="110.27" height="83.93"/><rect class="cls-2" x="115.52" y="157.31" width="94.79" height="66.87"/><rect class="cls-28" x="115.52" y="157.31" width="2.69" height="66.87"/><polygon class="cls-14" points="211.3 232.33 105.1 232.33 124.88 248.77 231.08 248.77 211.3 232.33"/><rect class="cls-14" x="124.88" y="248.77" width="106.2" height="8.29"/><polygon class="cls-14" points="124.88 248.77 124.88 257.06 105.09 240.55 105.09 232
.33 124.88 248.77"/><g class="cls-29"><path class="cls-27" d="M41.57,230.67,41.29,115l140-1.22c8.88.62,2.75,66.38,2.73,75.26-.06,27.16,13.08,22.73,12.31,45.46-1.38,40.88-114.47-1.34-114.47-1.34Z"/></g></g><rect class="cls-15" x="41.32" y="114.25" width="121.52" height="161.6"/><polygon class="cls-30" points="43.24 277.38 30.7 292.92 30.7 147.12 43.24 131.58 43.24 277.38"/><polygon class="cls-31" points="43.24 277.38 30.7 292.92 30.7 147.12 43.24 131.58 43.24 277.38"/><polygon class="cls-32" points="30.7 292.92 150.31 292.92 163.03 276.25 43.24 276.25 30.7 292.92"/><polygon class="cls-33" points="30.7 292.92 149.6 292.92 162.32 276.95 43.24 276.95 30.7 292.92"/><polygon class="cls-18" points="85.4 175.81 0.21 175.03 13.19 161.4 107.93 161.4 85.4 175.81"/><rect class="cls-27" x="13.15" y="48.83" width="87.64" height="112.48"/><g class="cls-34"><rect class="cls-11" x="43.62" y="81.34" width="111.68" height="86.74"/><rect class="cls-12" x="55.67" y="93.42" width="92.66" height="73.49"/>
<polygon class="cls-11" points="158.72 168.81 43.63 168.81 62.36 184.38 177.45 184.38 158.72 168.81"/><rect class="cls-14" x="63.81" y="184.38" width="113.64" height="7.85"/><polygon class="cls-19" points="64.54 184.38 64.54 192.22 45.8 176.59 45.8 168.81 64.54 184.38"/></g><rect class="cls-15" x="13.15" y="48.83" width="94.91" height="112.48"/><rect class="cls-22" x="55.67" y="93.42" width="4.93" height="67.34"/><polygon class="cls-22" points="43.62 80.57 40.55 82.92 40.55 161.84 43.62 161.84 43.62 80.57"/><polygon class="cls-31" points="43.62 81.27 40.55 83.62 40.55 161.84 43.62 161.84 43.62 81.27"/><polygon class="cls-32" points="13.15 160.41 0 174.56 0 62.94 13.15 48.78 13.15 160.41"/></svg>
\ No newline at end of file
diff --git a/assets/static/images/onboarding/onion-services.svg b/assets/static/images/onboarding/onion-services.svg
new file mode 100644
index 0000000..1918b0d
--- /dev/null
+++ b/assets/static/images/onboarding/onion-services.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; viewBox="0 0 300 300"><defs><style>.cls-1,.cls-10{fill:#fff;}.cls-1,.cls-12,.cls-13,.cls-3,.cls-4,.cls-5{stroke:#7d4696;}.cls-1,.cls-4,.cls-7,.cls-8{stroke-miterlimit:10;}.cls-1,.cls-11,.cls-12,.cls-13,.cls-2,.cls-3,.cls-4,.cls-5,.cls-7,.cls-8,.cls-9{stroke-width:1.78px;}.cls-13,.cls-2,.cls-4,.cls-7,.cls-8{fill:none;}.cls-11,.cls-2,.cls-9{stroke:#490260;}.cls-11,.cls-12,.cls-13,.cls-2,.cls-3,.cls-5,.cls-9{stroke-linecap:round;stroke-linejoin:round;}.cls-3,.cls-6{fill:#00d9b5;}.cls-11,.cls-5{fill:#f0d4fd;}.cls-7{stroke:#f0d4fd;}.cls-8{stroke:#00d9b5;}.cls-12,.cls-9{fill:#7d4696;}.cls-14{fill:url(#radial-gradient);}</style><radialGradient id="radial-gradient" cx="153.88" cy="151.52" r="90.62" gradientUnits="userSpaceOnUse"><stop offset="0.18" stop-color="#7d4696" stop-opacity="0"/><stop offset="0.39" stop-color="#7b4494" stop-opacity="0.03"/><stop offset="0.55" stop-colo
r="#763d8f" stop-opacity="0.13"/><stop offset="0.69" stop-color="#6e3286" stop-opacity="0.3"/><stop offset="0.82" stop-color="#612279" stop-opacity="0.53"/><stop offset="0.94" stop-color="#520d69" stop-opacity="0.83"/><stop offset="1" stop-color="#490260"/></radialGradient></defs><title>Onboarding II Gradient 300PX</title><circle class="cls-1" cx="204.65" cy="23.79" r="7.54"/><line class="cls-2" x1="152.81" y1="28.68" x2="152.81" y2="300.35"/><line class="cls-3" x1="294.12" y1="147.93" x2="12.57" y2="147.93"/><line class="cls-4" x1="247.66" y1="53.08" x2="57.95" y2="242.79"/><line class="cls-5" x1="247.66" y1="242.79" x2="57.95" y2="53.08"/><line class="cls-6" x1="276.95" y1="97.11" x2="28.66" y2="198.76"/><line class="cls-2" x1="276.95" y1="97.11" x2="28.66" y2="198.76"/><line class="cls-4" x1="101.98" y1="23.79" x2="203.63" y2="272.07"/><line class="cls-7" x1="29.09" y1="96.09" x2="276.52" y2="199.78"/><line class="cls-4" x1="100.96" y1="271.65" x2="204.65" y2="24.21"/><line class
="cls-4" x1="129.67" y1="37.53" x2="175.94" y2="258.34"/><line class="cls-8" x1="263.21" y1="124.8" x2="42.4" y2="171.07"/><line class="cls-4" x1="214.51" y1="53.5" x2="91.1" y2="242.36"/><line class="cls-4" x1="247.23" y1="209.64" x2="58.38" y2="86.22"/><line class="cls-4" x1="246.21" y1="84.69" x2="59.4" y2="211.17"/><line class="cls-8" x1="89.56" y1="54.52" x2="216.05" y2="241.34"/><line class="cls-4" x1="42.04" y1="126.6" x2="263.57" y2="169.26"/><line class="cls-8" x1="131.47" y1="258.7" x2="174.14" y2="37.16"/><circle class="cls-9" cx="153.88" cy="151.52" r="90.62"/><circle class="cls-5" cx="153.88" cy="151.52" r="83.34"/><circle class="cls-5" cx="153.88" cy="151.52" r="74.23"/><circle class="cls-5" cx="153.88" cy="151.52" r="61.35"/><circle class="cls-5" cx="153.88" cy="151.52" r="48.47"/><circle class="cls-5" cx="153.88" cy="151.52" r="35.59"/><circle class="cls-10" cx="153.88" cy="151.52" r="22.31"/><circle class="cls-3" cx="8.58" cy="148.87" r="7.58"/><circle class="cls-11
" cx="249.76" cy="242.79" r="10.67"/><circle class="cls-1" cx="291.14" cy="147.93" r="9.86"/><circle class="cls-12" cx="291.14" cy="147.93" r="3.8"/><ellipse class="cls-1" cx="152.81" cy="288.64" rx="13.31" ry="12.27"/><ellipse class="cls-1" cx="152.81" cy="288.64" rx="5.19" ry="4.78"/><circle class="cls-3" cx="152.81" cy="14.99" r="8.67"/><circle class="cls-13" cx="152.81" cy="14.99" r="13.57"/><circle class="cls-12" cx="60.12" cy="209.48" r="3.8"/><circle class="cls-14" cx="153.88" cy="151.52" r="90.62"/></svg>
\ No newline at end of file
diff --git a/assets/static/images/onboarding/protected.svg b/assets/static/images/onboarding/protected.svg
new file mode 100644
index 0000000..0c88ab9
--- /dev/null
+++ b/assets/static/images/onboarding/protected.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; viewBox="0 0 300 300"><defs><style>.cls-1{fill:#00d9b5;}.cls-11,.cls-2{fill:none;}.cls-2{stroke:#7d4696;}.cls-2,.cls-6{stroke-miterlimit:10;}.cls-11,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6{stroke-width:1.76px;}.cls-3,.cls-7{fill:#f0d4fd;}.cls-3,.cls-4,.cls-5,.cls-6{stroke:#65318e;}.cls-11,.cls-3,.cls-4,.cls-5{stroke-linecap:round;stroke-linejoin:round;}.cls-4,.cls-8{fill:#65318e;}.cls-5,.cls-6{fill:#fff;}.cls-9{fill:#490260;}.cls-10{fill:url(#linear-gradient);}.cls-11{stroke:#490260;}</style><linearGradient id="linear-gradient" x1="140.48" y1="243.84" x2="142.2" y2="139.11" gradientUnits="userSpaceOnUse"><stop offset="0.08" stop-color="#7d4696"/><stop offset="0.39" stop-color="#7d4696" stop-opacity="0.61"/><stop offset="0.85" stop-color="#7d4696" stop-opacity="0"/></linearGradient></defs><title>Onboarding II Gradient 300PX</title><circle class="cls-1" cx="145.12" cy="149" r
="87.32"/><circle class="cls-2" cx="145.12" cy="153.68" r="122.63"/><circle class="cls-2" cx="145.12" cy="153.68" r="138.53"/><ellipse class="cls-3" cx="47.28" cy="67.74" rx="23.7" ry="22"/><ellipse class="cls-4" cx="47.28" cy="67.74" rx="17.5" ry="16.25"/><ellipse class="cls-5" cx="53.64" cy="61.41" rx="8.75" ry="8.12"/><path class="cls-6" d="M298.54,237.25h0a4.76,4.76,0,0,0,.93-6.84l-17.23-21.49-5.41,3.89L291.76,236A4.75,4.75,0,0,0,298.54,237.25Z"/><circle class="cls-6" cx="266.06" cy="192.52" r="24.57"/><path class="cls-3" d="M277.49,208.38a19.56,19.56,0,1,1,4.44-27.29A19.58,19.58,0,0,1,277.49,208.38Z"/><path class="cls-4" d="M264.07,173.06a119.88,119.88,0,0,1-8.66,35.86,19.23,19.23,0,0,1-5.21-5c-.23-.31-.44-.63-.64-.95a19.54,19.54,0,0,1,5.08-26.34c.5-.36,1-.68,1.52-1a19.81,19.81,0,0,1,4.53-1.95A20.58,20.58,0,0,1,264.07,173.06Z"/><ellipse class="cls-7" cx="155.04" cy="281.25" rx="20.6" ry="19.18"/><path class="cls-8" d="M155,263c10.89,0,19.71,8.19,19.71,18.3s-8.82,18.3-19.71,18.3
-19.71-8.2-19.71-18.3S144.15,263,155,263m0-1.77c-11.84,0-21.48,9-21.48,20.07s9.64,20.06,21.48,20.06,21.48-9,21.48-20.06-9.64-20.07-21.48-20.07Z"/><ellipse class="cls-4" cx="155.04" cy="281.25" rx="14.56" ry="13.51"/><ellipse class="cls-5" cx="160.33" cy="275.98" rx="7.28" ry="6.76"/><circle class="cls-3" cx="164.73" cy="15.82" r="11.82"/><rect class="cls-6" x="0.52" y="178.35" width="38.3" height="38.3"/><polygon class="cls-4" points="25.77 197.5 34.36 206.08 28.25 212.19 19.67 203.61 11.09 212.19 4.98 206.08 13.56 197.5 4.98 188.92 11.09 182.81 19.67 191.39 28.25 182.81 34.36 188.92 25.77 197.5"/><path class="cls-3" d="M199,67.86V235.35a9.61,9.61,0,0,1-9.61,9.61H107.46a9.62,9.62,0,0,1-9.62-9.61V67.86a9.62,9.62,0,0,1,9.62-9.61h82A9.61,9.61,0,0,1,199,67.86Z"/><rect class="cls-6" x="91.49" y="58.25" width="101.18" height="186.72" rx="10.49" ry="10.49"/><polygon class="cls-9" points="184.72 214.59 99.47 214.59 99.47 77.01 184.72 77.01 184.72 146.71 184.72 214.59"/><polygon class="cls-1
0" points="184.72 214.59 99.47 214.59 99.47 77.01 184.72 77.01 184.72 146.71 184.72 214.59"/><circle class="cls-6" cx="142.08" cy="228.32" r="8.19"/><line class="cls-6" x1="132.31" y1="69.1" x2="151.85" y2="69.1"/><path class="cls-3" d="M167.1,196.15c55.71-13.49,41.42-94.88,41.42-94.88L166.31,90.2h-1.66l-42.21,11.07s-14.28,81.39,41.43,94.88Z"/><path class="cls-6" d="M166.86,188.21c47.36-11.46,35.22-80.66,35.22-80.66l-35.89-9.42h-1.41l-35.89,9.42s-12.15,69.2,35.22,80.66Z"/><path class="cls-1" d="M161.33,167h0a7.21,7.21,0,0,1-6.07-3.34l-11.08-17.33a7.23,7.23,0,0,1,12.18-7.78l5,7.86,19.42-30a7.23,7.23,0,0,1,12.14,7.85L167.4,163.71A7.21,7.21,0,0,1,161.33,167Z"/><path class="cls-11" d="M161.33,167h0a7.21,7.21,0,0,1-6.07-3.34l-11.08-17.33a7.23,7.23,0,0,1,12.18-7.78l5,7.86,19.42-30a7.23,7.23,0,0,1,12.14,7.85L167.4,163.71A7.21,7.21,0,0,1,161.33,167Z"/><rect class="cls-4" x="232.43" y="43.75" width="44.88" height="44.88"/><polygon class="cls-3" points="262.03 66.19 272.09 76.24 264.93 83.4 2
54.87 73.35 244.82 83.4 237.66 76.24 247.72 66.19 237.66 56.13 244.82 48.98 254.87 59.03 264.93 48.98 272.09 56.13 262.03 66.19"/></svg>
\ No newline at end of file
diff --git a/assets/static/images/onboarding/security.svg b/assets/static/images/onboarding/security.svg
new file mode 100644
index 0000000..c07a404
--- /dev/null
+++ b/assets/static/images/onboarding/security.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; viewBox="0 0 300 300"><defs><style>.cls-1,.cls-16{fill:#490260;}.cls-2{fill:#7d4696;}.cls-13,.cls-15,.cls-3,.cls-9{fill:none;}.cls-12,.cls-13,.cls-15,.cls-16,.cls-3,.cls-4,.cls-6,.cls-9{stroke:#490260;}.cls-12,.cls-15,.cls-3{stroke-miterlimit:10;}.cls-16,.cls-3,.cls-4,.cls-6,.cls-7,.cls-9{stroke-width:1.76px;}.cls-10,.cls-4{fill:#00d9b5;}.cls-13,.cls-16,.cls-4,.cls-6,.cls-7,.cls-9{stroke-linecap:round;stroke-linejoin:round;}.cls-5{fill:url(#linear-gradient);}.cls-6{fill:#65318e;}.cls-7{fill:#e9d3e6;stroke:#65318e;}.cls-12,.cls-8{fill:#f0d4fd;}.cls-11{fill:url(#linear-gradient-2);}.cls-12,.cls-13,.cls-15{stroke-width:1.8px;}.cls-14{fill:#fff;}</style><linearGradient id="linear-gradient" x1="-13.25" y1="125.79" x2="84.76" y2="125.79" gradientUnits="userSpaceOnUse"><stop offset="0.08" stop-color="#7d4696"/><stop offset="0.31" stop-color="#7d4696" stop-opacity="0.61"/><sto
p offset="0.66" stop-color="#7d4696" stop-opacity="0"/></linearGradient><linearGradient id="linear-gradient-2" x1="77.47" y1="125.92" x2="194.43" y2="125.92" gradientUnits="userSpaceOnUse"><stop offset="0.08" stop-color="#7d4696"/><stop offset="0.29" stop-color="#7d4696" stop-opacity="0.61"/><stop offset="0.6" stop-color="#7d4696" stop-opacity="0"/></linearGradient></defs><title>Onboarding II Gradient 300PX</title><path class="cls-1" d="M237.34,224.93H7.26V32.07a8,8,0,0,1,8.05-8l222,.72Z"/><path class="cls-2" d="M252.17,223.82H11V35.55A10.26,10.26,0,0,1,21.25,25.29H243.64a8.53,8.53,0,0,1,8.53,8.53Z"/><path class="cls-3" d="M252.17,223.82H11V35.55A10.26,10.26,0,0,1,21.25,25.29H243.64a8.53,8.53,0,0,1,8.53,8.53Z"/><rect class="cls-4" x="24.68" y="37.77" width="208.72" height="176.05"/><rect class="cls-5" x="24.68" y="37.77" width="208.72" height="176.05"/><rect class="cls-6" x="222.35" y="37.77" width="11.75" height="176.05"/><polygon class="cls-7" points="240.35 224.93 14 224.93 68.09
264.4 294.44 264.4 240.35 224.93"/><polygon class="cls-8" points="242.21 224.93 14 224.93 68.09 264.4 296.3 264.4 242.21 224.93"/><polygon class="cls-9" points="242.21 224.93 14 224.93 68.09 264.4 296.3 264.4 242.21 224.93"/><rect class="cls-2" x="68.1" y="264.4" width="228.21" height="24.13"/><rect class="cls-3" x="68.1" y="264.4" width="228.21" height="24.13"/><polygon class="cls-1" points="7.26 219.88 7.26 242.55 68.09 289.48 68.09 264.4 7.26 219.88"/><rect class="cls-8" y="60.55" width="10.31" height="24.06"/><rect class="cls-9" y="60.55" width="10.31" height="24.06"/><rect class="cls-8" y="161.24" width="13.09" height="24.06"/><rect class="cls-9" y="161.24" width="13.09" height="24.06"/><path class="cls-10" d="M67.21,184.74H11.71V160.68h55.5A8.77,8.77,0,0,1,76,169.45V176A8.76,8.76,0,0,1,67.21,184.74Z"/><path class="cls-9" d="M67.21,184.74H11.71V160.68h55.5A8.77,8.77,0,0,1,76,169.45V176A8.76,8.76,0,0,1,67.21,184.74Z"/><path class="cls-10" d="M67.21,84.47H11.71v-24h55.5A8.76,8.7
6,0,0,1,76,69.18v6.53A8.76,8.76,0,0,1,67.21,84.47Z"/><path class="cls-9" d="M67.21,84.47H11.71v-24h55.5A8.76,8.76,0,0,1,76,69.18v6.53A8.76,8.76,0,0,1,67.21,84.47Z"/><polygon class="cls-9" points="154.35 213.68 154.35 177.47 122.81 177.47 122.81 123.02 143.3 123.02 143.3 38.77 234.1 38.77 234.1 213.82 154.35 213.68"/><polygon class="cls-11" points="154.35 213.68 154.35 177.47 122.81 177.47 122.81 123.02 143.3 123.02 143.3 38.02 239.76 38.02 239.76 213.82 154.35 213.68"/><path class="cls-12" d="M201.22,166.87l.11,27.27A26.61,26.61,0,0,0,228,220.62h4.69a26.61,26.61,0,0,0,26.48-26.69l-.1-27.28h-1.31l.1,27.27A25.3,25.3,0,0,1,232.7,219.3l-4.68,0a25.3,25.3,0,0,1-25.38-25.18l-.11-27.28Z"/><path class="cls-12" d="M201.33,194.14l-.11-27.27h1.31l0-6.06-7.37,0,.13,33.34"/><path class="cls-1" d="M222.48,63.68l4.69,0a46.13,46.13,0,0,1,46.27,45.91l.33,84.27-13.44,0-.13-33.33-13.43.05-.2-50.94a19.25,19.25,0,0,0-19.29-19.15l-4.69,0a19.24,19.24,0,0,0-19.14,19.3l.2,50.94-13.44.05.13,33.34-13.42.05L176
.59,110A46.14,46.14,0,0,1,222.48,63.68Z"/><path class="cls-13" d="M222.48,63.68l4.69,0a46.13,46.13,0,0,1,46.27,45.91l.33,84.27-13.44,0-.13-33.33-13.43.05-.2-50.94a19.25,19.25,0,0,0-19.29-19.15l-4.69,0a19.24,19.24,0,0,0-19.14,19.3l.2,50.94-13.44.05.13,33.34-13.42.05L176.59,110A46.14,46.14,0,0,1,222.48,63.68Z"/><path class="cls-14" d="M227.41,63.68l4.69,0a46.13,46.13,0,0,1,46.26,45.91l.33,84.27-13.43,0-.13-33.33-13.44.05-.2-50.94A19.25,19.25,0,0,0,232.2,90.52l-4.69,0a19.24,19.24,0,0,0-19.14,19.3l.2,50.94-13.43.05.13,33.34-13.42.05L181.52,110A46.13,46.13,0,0,1,227.41,63.68Z"/><path class="cls-13" d="M227.41,63.68l4.69,0a46.13,46.13,0,0,1,46.26,45.91l.33,84.27-13.43,0-.13-33.33-13.44.05-.2-50.94A19.25,19.25,0,0,0,232.2,90.52l-4.69,0a19.24,19.24,0,0,0-19.14,19.3l.2,50.94-13.43.05.13,33.34-13.42.05L181.52,110A46.13,46.13,0,0,1,227.41,63.68Z"/><rect class="cls-2" x="181.36" y="155.29" width="118.5" height="83.44" transform="translate(-0.7 0.86) rotate(-0.2)"/><rect class="cls-15" x="181.36
" y="155.29" width="118.5" height="83.44" transform="translate(-0.7 0.86) rotate(-0.2)"/><polygon class="cls-1" points="153.18 155.56 153.49 239.41 182 239.41 181.69 155.49 153.18 155.56"/><polygon class="cls-15" points="153.18 155.56 153.49 239.41 182 239.41 181.69 155.49 153.18 155.56"/><rect class="cls-4" x="164.8" y="111.1" width="62.9" height="27.55" rx="13.77" ry="13.77"/><path class="cls-1" d="M195.78,138.66h-17.2a13.76,13.76,0,0,1-9.73-23.51,13.67,13.67,0,0,1,9.73-4.05h17.2A13.83,13.83,0,0,0,182,124.88,13.83,13.83,0,0,0,195.78,138.66Z"/><path class="cls-9" d="M195.78,138.66h-17.2a13.76,13.76,0,0,1-9.73-23.51,13.67,13.67,0,0,1,9.73-4.05h17.2A13.83,13.83,0,0,0,182,124.88,13.83,13.83,0,0,0,195.78,138.66Z"/><circle class="cls-14" cx="239.44" cy="198.76" r="21.77"/><circle class="cls-9" cx="239.44" cy="198.76" r="21.77"/><circle class="cls-1" cx="239.46" cy="194.39" r="8.2"/><circle class="cls-9" cx="239.46" cy="194.39" r="8.2"/><rect class="cls-16" x="236.8" y="198.16" width="5.
32" height="15.79"/><circle class="cls-4" cx="35.64" cy="48.81" r="4.57"/><circle class="cls-4" cx="229.63" cy="48.81" r="4.57"/><circle class="cls-4" cx="35.64" cy="123.02" r="4.57"/><circle class="cls-4" cx="35.64" cy="203.07" r="4.57"/></svg>
\ No newline at end of file
diff --git a/templates/visuals.html b/templates/visuals.html
index e0d031c..17901da 100644
--- a/templates/visuals.html
+++ b/templates/visuals.html
@@ -483,6 +483,7 @@
<h1 id="illustrations"> </h1>
<div class="page-header mb-4 mt-5">
<h3>Illustrations</h3>
+ <!--p class="text-muted">a description</p-->
</div>
<div class="row">
<div class="col-4">
@@ -503,38 +504,34 @@
<div class="col-4">
<img src="https://torproject.org/static/images/download/svg/get-connected.svg"; alt="get connected"/>
</div>
-
- <div class="page-header mb-4 mt-5">
- <h3>Tor Browser Onboarding</h3>
- </div>
- <div class="col-4">
- <img src="../static/images/home/svg/encryption.svg" alt="encryption"/>
- </div>
- <div class="col-4">
- <img src="../static/images/home/svg/browse-freely.svg" alt="browse freely"/>
- </div>
- <div class="col-4">
- <img src="https://torproject.org/static/images/download/svg/get-connected.svg"; alt="get connected"/>
- </div>
- <div class="col-4">
- <img src="../static/images/home/svg/encryption.svg" alt="encryption"/>
- </div>
- <div class="col-4">
- <img src="../static/images/home/svg/browse-freely.svg" alt="browse freely"/>
- </div>
- <div class="col-4">
- <img src="https://torproject.org/static/images/download/svg/get-connected.svg"; alt="get connected"/>
- </div>
-
</div>
-
-
+ <div class="page-header mb-4 mt-5 w-100">
+ <p class="text-muted">Tor Browser Onboarding</p>
+ </div>
+ <div class="row">
+ <div class="col-4 p-5">
+ <img src="../static/images/onboarding/circuit.svg" alt="circuit"/>
+ </div>
+ <div class="col-4 p-5">
+ <img src="../static/images/onboarding/circumvention.svg" alt="circumvention"/>
+ </div>
+ <div class="col-4 p-5">
+ <img src="../static/images/onboarding/protected.svg" alt="protected"/>
+ </div>
+ <div class="col-4 p-5">
+ <img src="../static/images/onboarding/decentralized.svg" alt="decentralized"/>
+ </div>
+ <div class="col-4 p-5">
+ <img src="../static/images/onboarding/onion-services.svg" alt="onion-services"/>
+ </div>
+ <div class="col-4 p-5">
+ <img src="../static/images/onboarding/security.svg" alt="security"/>
+ </div>
+ </div>
<h1 id="pattern"> </h1>
<div class="page-header mb-4 mt-5">
<h3>Onion Pattern</h3>
</div>
- <div class="row">
-
- </div>
+ <div class="row"></div>
</main>
{% endblock %}
_______________________________________________
tor-commits mailing list
tor-commits@xxxxxxxxxxxxxxxxxxxx
https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-commits