Updated the contact page with the new design

customize.dist/pages.js

@@ -286,45 +286,35 @@ define([
                 )
             ]),
             h('div.container.cp-container', [
-                h('div.row.cp-iconCont', [
+                h('div.row.cp-iconCont.align-items-center', [
                     h('div.col-12',
-                        setHTML(h('p.text-center'), Msg.main_about_p2)
+                        setHTML(h('h4.text-center'), Msg.main_about_p26)
                     ),
-                    h('div.col-4.col-sm-2', 
-                                setHTML(h('p'), Msg.main_about_p21)
-                    ),
-                    h('div.col-4.col-sm-2',
-                        h('a.card', {href : "#"}, 
+                    h('div.col-6.col-sm-3.col-md-3.col-lg-3',
+                        h('a.card', {href : "https://twitter.com/cryptpad"}, 
                             h('div.card-body', 
                                 setHTML(h('p'), Msg.main_about_p22)
                             )
                         )
                     ),
-                    h('div.col-4.col-sm-2',
-                        h('a.card', 
-                            h('div.card-body', 
-                                setHTML(h('p'), Msg.main_about_p21)
-                            )
-                        )
-                    ),
-                    h('div.col-4.col-sm-2',
-                        h('a.card', 
+                    h('div.col-6.col-sm-3.col-md-3.col-lg-3',
+                        h('a.card', {href : "https://github.com/xwiki-labs/cryptpad/issues/"},
                             h('div.card-body', 
-                                setHTML(h('p'), Msg.main_about_p21)
+                                setHTML(h('p'), Msg.main_about_p23)
                             )
                         )
                     ),
-                    h('div.col-4.col-sm-2',
-                        h('div.card', 
+                    h('div.col-6.col-sm-3.col-md-3.col-lg-3',
+                        h('a.card', {href : "https://riot.im/app/#/room/#cryptpad:matrix.org"},
                             h('div.card-body', 
-                                setHTML(h('p'), Msg.main_about_p21)
+                                setHTML(h('p'), Msg.main_about_p24)
                             )
                         )
                     ),
-                    h('div.col-4.col-sm-2',
-                        h('div.card', 
+                    h('div.col-6.col-sm-3.col-md-3.col-lg-3',
+                        h('a.card', {href : "mailto:research@xwiki.com"},
                             h('div.card-body', 
-                                setHTML(h('p'), Msg.main_about_p21)
+                                setHTML(h('p'), Msg.main_about_p25)
                             )
                         )
                     ),

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

@@ -13,18 +13,35 @@
 .cp-container {
 	background: #fff;
 	.cp-iconCont{
+		h4 {
+			margin-top: 1.5em;
+			margin-bottom: 1.5em;
+		}
 		div {
 			.card {
-				padding: 3.5em 1em 1em 1em;
+				padding: 4em 1em 0.5em 1em;
 				box-shadow: 0 5px 15px rgba(69,145,196, 0.3);
 				border-color: #fff;
 				text-align: center;
+				margin-bottom: 1em;
 				&:hover, &:focus {
 					text-decoration: none;
-					box-shadow: 0 2px 4px rgba(69, 145, 196, 0.6);
+					transform: scale(1.05);
+				}
+				@media (max-width: 1200px) and (min-width: 769px) {
+					min-height: 139px;
+				}
+				@media (max-width: 768px) and (min-width: 576px){
+					min-height: 164px;
+				}
+				@media (max-width: 496px) {
+					min-height: 140px;
+				}
+				@media (max-width: 335px) {
+					min-height: 162px;
 				}
 			}
-			&:nth-child(3) {
+			&:nth-child(2) {
 				.card {
 					background-image: url(/customize/images/twitter.svg);
 		        	background-repeat: no-repeat;
@@ -32,7 +49,7 @@
 		        	background-size: 3rem;
 				}
 			}
-			&:nth-child(4) {
+			&:nth-child(3) {
 				.card {
 					background-image: url(/customize/images/issue.svg);
 		        	background-repeat: no-repeat;
@@ -40,6 +57,22 @@
 		        	background-size: 3rem;
 				}
 			}
+			&:nth-child(4) {
+				.card {
+					background-image: url(/customize/images/sayhi.svg);
+		        	background-repeat: no-repeat;
+		        	background-position: 50% 10%;
+		        	background-size: 3rem;
+				}
+			}
+			&:nth-child(5) {
+				.card {
+					background-image: url(/customize/images/email.svg);
+		        	background-repeat: no-repeat;
+		        	background-position: 50% 10%;
+		        	background-size: 3rem;
+				}
+			}
 		}
 	}
 }

customize.dist/translations/messages.js

@@ -516,8 +516,11 @@ define(function () {
 
     // contact.html
     out.main_about_p2 = 'If you have any questions or comments, feel free to reach out!<br/>You can <a href="https://twitter.com/cryptpad"><i class="fa fa-twitter"></i>tweet us</a>, open an issue <a href="https://github.com/xwiki-labs/cryptpad/issues/" title="our issue tracker">on <i class="fa fa-github"></i>GitHub</a>. Come say hi on <a href="https://riot.im/app/#/room/#cryptpad:matrix.org" title="Matrix">our <i class="fa fa-comment"></i>Matrix channel</a> or IRC (#cryptpad on irc.freenode.net), or <a href="mailto:research@xwiki.com"><i class="fa fa-envelope"></i>send us an email</a>.';
-    out.main_about_p21 = 'You can';
     out.main_about_p22 = 'Tweet us';
+    out.main_about_p23 = 'open an issue on GitHub';
+    out.main_about_p24 = 'say Hello (Matrix)';
+    out.main_about_p25 = 'send us an email';
+    out.main_about_p26 = 'If you have any questions or comments, feel free to reach out!'
 
     out.main_info = "<h2>Collaborate in Confidence</h2> Grow your ideas together with shared documents while <strong>Zero Knowledge</strong> technology secures your privacy; <strong>even from us</strong>.";
     out.main_catch_phrase = "The Zero Knowledge Cloud";