Updated the what is page

customize.dist/pages.js

@@ -292,32 +292,54 @@ define([
     Pages['/what-is-cryptpad.html'] = function () {
         return h('div#cp-main', [
             infopageTopbar(),
+            h('div.container-fluid.cp-what-is',[
+                h('div.container',[
+                    h('div.row',[
+                        h('div.col-12.text-center', h('h1', Msg.whatis_title)),
+                    ]),
+                ]),
+            ]),
             h('div.container.cp-container', [
-                h('center', h('h1', Msg.whatis_title)),
+                h('div.row.align-items-center', [
-                setHTML(h('h2'), Msg.whatis_collaboration),
+                    h('div.col-12.col-sm-12.col-md-12.col-lg-6', [
-                setHTML(h('p'), Msg.whatis_collaboration_p1),
+                        setHTML(h('h2'), Msg.whatis_collaboration),
-                h('img', { src: '/customize/images/pad_screenshot.png?' + urlArgs }),
+                        setHTML(h('p'), Msg.whatis_collaboration_p1),
-                setHTML(h('p'), Msg.whatis_collaboration_p2),
+                        setHTML(h('p'), Msg.whatis_collaboration_p2),
-                setHTML(h('p'), Msg.whatis_collaboration_p3),
+                        setHTML(h('p'), Msg.whatis_collaboration_p3),
-                setHTML(h('h2'), Msg.whatis_zeroknowledge),
+                    ]),
-                h('div.row', [
+                    h('div.col-12.col-sm-12.col-md-12.col-lg-6', [
-                    h('div.col-md-4.align-self-center', [
+                        h('img', { src: '/customize/images/pad_screenshot.png?' + urlArgs }),
-                        h('img#zeroknowledge', { src: '/customize/images/zeroknowledge_small.png?' + urlArgs }),
                     ]),
-                    h('div.col-md-8', [
+                ]),
+                h('div.row.align-items-center', [
+                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.push-lg-6', [
+                        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.col-12.col-sm-12.col-md-12.col-lg-6.pull-lg-6', [
+                        h('img#zeroknowledge', { src: '/customize/images/zeroknowledge_small.png?' + urlArgs }),
+                    ]),
+                ]),
+                h('div.row.align-items-center', [
+                    h('div.col-12.col-sm-12.col-md-12.col-lg-6', [
+                        setHTML(h('h2'), Msg.whatis_drive),
+                        setHTML(h('p'), Msg.whatis_drive_p1),
+                        setHTML(h('p'), Msg.whatis_drive_p2),
+                        setHTML(h('p'), Msg.whatis_drive_p3),
+                    ]),
+                    h('div.col-12.col-sm-12.col-md-12.col-lg-6', [
+                        h('img', { src: '/customize/images/drive_screenshot.png?' + urlArgs }),
+                    ]),
+                ]),
+                h('div.row.align-items-center', [
+                    h('div.col-12', [
+                        setHTML(h('h2.text-center'), Msg.whatis_business),
+                        setHTML(h('p'), Msg.whatis_business_p1),
+                        setHTML(h('p'), Msg.whatis_business_p2),
+                    ]),
                 ]),
-                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),
-                setHTML(h('p'), Msg.whatis_business_p1),
-                setHTML(h('p'), Msg.whatis_business_p2),
             ]),
             infopageFooter(),
         ]);

customize.dist/src/less2/pages/page-login.less

@@ -73,6 +73,6 @@
     }
 }
 .cp-container {
-	padding-top: 0;
+	padding-top: 3em;
 	min-height: 66vh;
 }

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

@@ -4,6 +4,40 @@
 .infopages_main();
 .infopages_topbar();
 
-img#zeroknowledge {
+.cp-what-is {
-	width: 100%;
+		padding-top: 3em;
+	    padding-bottom: 3em;
+	    background-image: url(/customize/bkwhat.jpg);
+	    background-size: cover;
+	    background-repeat: no-repeat;
+	    background-position: center;
+	    color: #fff;
+	    h1 {
+	    	font-weight: 700;
+	    }
+}
+#cp-main {
+	background: #fff;
+}
+.cp-container {
+	padding-top: 3em;
+	padding-bottom: 3em;
+	h2 {
+		margin-top: 0;
+		font-weight: 700;
+		color: @cryptpad_header_col;
+	}
+	p {
+		color: @cryptpad_text_col
+	}
+	#zeroknowledge {
+		width: 65%;
+	}
+	.row {
+		margin-bottom: 1.5em;
+	}
+	img {
+		display: block;
+		margin: 0 auto;
+	}
 }