Add screenshots to What is CryptPad

customize.dist/pages.js

@@ -219,14 +219,23 @@ define([
                 h('center', h('h1', Msg.whatis_title)),
                 setHTML(h('h2'), Msg.whatis_collaboration),
                 setHTML(h('p'), Msg.whatis_collaboration_p1),
+                h('img', { src: '/customize/images/pad_screenshot.png?' + urlArgs }),
                 setHTML(h('p'), Msg.whatis_collaboration_p2),
                 setHTML(h('p'), Msg.whatis_collaboration_p3),
                 setHTML(h('h2'), Msg.whatis_zeroknowledge),
-                setHTML(h('p'), Msg.whatis_zeroknowledge_p1),
-                setHTML(h('p'), Msg.whatis_zeroknowledge_p2),
-                setHTML(h('p'), Msg.whatis_zeroknowledge_p3),
+                h('div.row', [
+                    h('div.col-md-4.align-self-center', [
+                        h('img#zeroknowledge', { src: '/customize/images/zeroknowledge_small.png?' + urlArgs }),
+                    ]),
+                    h('div.col-md-8', [
+                        setHTML(h('p'), Msg.whatis_zeroknowledge_p1),
+                        setHTML(h('p'), Msg.whatis_zeroknowledge_p2),
+                        setHTML(h('p'), Msg.whatis_zeroknowledge_p3),
+                    ]),
+                ]),
                 setHTML(h('h2'), Msg.whatis_drive),
                 setHTML(h('p'), Msg.whatis_drive_p1),
+                h('img', { src: '/customize/images/drive_screenshot.png?' + urlArgs }),
                 setHTML(h('p'), Msg.whatis_drive_p2),
                 setHTML(h('p'), Msg.whatis_drive_p3),
                 setHTML(h('h2'), Msg.whatis_business),

customize.dist/src/less2/include/infopages.less

@@ -18,10 +18,10 @@
     }
 
     border: 0;
-	padding: 0;
-	margin: 0;
+    padding: 0;
+    margin: 0;
 
-	font-size: 14px;
+    font-size: 14px;
     font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
 
     .cp-container {
@@ -33,6 +33,20 @@
             font-size: 3em;
             margin-bottom: 0.5em;
         }
+        h2 {
+            font-size: 2em;
+            margin-top: 1em;
+            margin-bottom: 0.5em;
+        }
+
+        img {
+            &.left {
+                float: left;
+            }
+
+            max-width: 100%;
+        }
+
         .form-group {
             & > * {
                 margin-top: 0.5em;

customize.dist/src/less2/pages/page-what-is-cryptpad.less

@@ -3,3 +3,7 @@
 
 .infopages_main();
 .infopages_topbar();
+
+img#zeroknowledge {
+	width: 100%;
+}

customize.dist/translations/messages.js

@@ -545,7 +545,7 @@ define(function () {
     out.whatis_drive_p3 = 'You can also upload files in your CryptDrive and share them with colleagues. Uploaded files can be organized just like collaborative pads.';
     out.whatis_business = 'CryptPad for Business';
     out.whatis_business_p1 = 'CryptPad\'s Zero Knowledge encryption is excellent for multiplying the effectiveness of existing security protocols by mirroring organizational access controls in cryptography. Because sensitive assets can only be decrypted using employee access credentials, CryptPad removes the hacker jackpot which exists in traditional IT servers. Read the <a href="https://blog.cryptpad.fr/images/whitepaper.pdf">CryptPad Whitepaper</a> to learn more about how it can help your business.';
-    out.whatis_business_p2 = 'CryptPad is deployable on premises and the <a href="https://cryptpad.fr/about.html">CryptPad developers</a> at XWiki SAS are able to offer commercial support, customization and development. Reach out to <a href="mailto:sales@cryptpad.fr>sales@cryptpad.fr</a> for more information.';
+    out.whatis_business_p2 = 'CryptPad is deployable on premises and the <a href="https://cryptpad.fr/about.html">CryptPad developers</a> at XWiki SAS are able to offer commercial support, customization and development. Reach out to <a href="mailto:sales@cryptpad.fr">sales@cryptpad.fr</a> for more information.';
 
     // privacy.html