final feedback implemented

Signed-off-by: Jos Poortvliet <jospoortvliet@gmail.com>

14 files changed, 149 insertions, 172 deletions

diff --git a/assets/css/custom.css b/assets/css/custom.css
index 8bbaba56..4e7f0aef 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -3443,7 +3443,7 @@ tbody.collapse.in {
   color: #6c6c6c; }
 
 .hyperlink {
-  color: #a2a2a2;
+  color: #6c6c6c;
   text-decoration: none;
   font-weight: 500;
   border-bottom: solid 1px;
@@ -4021,7 +4021,7 @@ template, [hidden] {
   color: #6c6c6c; }
 
 .hyperlink {
-  color: #a2a2a2;
+  color: #6c6c6c;
   text-decoration: none;
   font-weight: 500;
   border-bottom: solid 1px;
@@ -5444,7 +5444,8 @@ footer.page-footer {
     font-size: 20px;
     line-height: 1.6;
     text-shadow: 0px 0px 10px #333;
-    transform: translateY(50px); }
+    transform: translateY(50px);
+    font-weight: 400; }
   .background .topheader {
     /*     position: absolute; */
     /*     top: 30%; */
@@ -9660,29 +9661,6 @@ footer.page-footer {
   font-size: 22px;
   font-weight: 300; }
 
-.section--paragraph__tittle {
-  font-size: 22px;
-  line-height: 30px;
-  font-weight: 600;
-  color: #2a2a36; }
-
-.section--paragraph {
-  font-size: 1.125em;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #6c6c6c; }
-
-.hyperlink {
-  color: #a2a2a2;
-  text-decoration: none;
-  font-weight: 500;
-  border-bottom: solid 1px;
-  transition: all 0.5s ease;
-  text-decoration: none; }
-  .hyperlink :hover {
-    text-decoration: none;
-    color: #2a2a36; }
-
 .screen-reader-text {
   display: none; }
 
diff --git a/assets/css/custom.scss b/assets/css/custom.scss
index 2c499d8d..50a79bc2 100644
--- a/assets/css/custom.scss
+++ b/assets/css/custom.scss
@@ -117,31 +117,7 @@
   font-size: 22px;
   font-weight: 300;
 }
-.section--paragraph__tittle {
-  font-size: 22px;
-  line-height: 30px;
-  font-weight: 600;
-  color: #2a2a36;
-}
-.section--paragraph {
-  font-size: 1.125em;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #6c6c6c;
-}
 
-.hyperlink {
-	color: #a2a2a2;
-	text-decoration: none;
-	font-weight: 500;
-	border-bottom: solid 1px;
-	transition: all 0.5s ease;
-	text-decoration: none;
-	:hover {
-		text-decoration: none;
-		color: #2a2a36;
-	}
-}
 
 .screen-reader-text {
 	display: none;
diff --git a/assets/css/modules/hero.scss b/assets/css/modules/hero.scss
index 291c692a..ce4398ef 100644
--- a/assets/css/modules/hero.scss
+++ b/assets/css/modules/hero.scss
@@ -21,6 +21,7 @@
     line-height: 1.6;
     text-shadow: 0px 0px 10px #333;
     transform: translateY(50px);
+    font-weight: 400;
   }
 
   .topheader {
diff --git a/assets/css/modules/typography.scss b/assets/css/modules/typography.scss
index 2d2e25dd..1584474d 100644
--- a/assets/css/modules/typography.scss
+++ b/assets/css/modules/typography.scss
@@ -82,7 +82,7 @@
 }
 
 .hyperlink {
-    color: #a2a2a2;
+    color: $medium-grey;
     text-decoration: none;
     font-weight: 500;
     border-bottom: solid 1px;
diff --git a/assets/css/pages/appdev.css b/assets/css/pages/appdev.css
index 36ebe76e..9d68ee05 100644
--- a/assets/css/pages/appdev.css
+++ b/assets/css/pages/appdev.css
@@ -151,25 +151,24 @@
   border-top-right-radius: 0;
   border-top-left-radius: 0; }
 
-.nav {
-  position: relative;
-  padding: 5px 0 30px 0; }
-  .nav.nav-pills.brand-pills.nav-stacked {
-    opacity: 1;
-    /* compensate for nav being set to opacity 0 by our top nav bar code */ }
-    .nav.nav-pills.brand-pills.nav-stacked li {
-      margin: 0;
-      border-left: 1px solid lightgray; }
-      .nav.nav-pills.brand-pills.nav-stacked li:hover, .nav.nav-pills.brand-pills.nav-stacked li.active {
-        border-left: 1px solid blue;
-        font-weight: 700; }
-      .nav.nav-pills.brand-pills.nav-stacked li a {
-        color: #2a2a36;
-        background-color: transparent;
-        padding-left: 20px;
-        border-radius: 0;
-        margin: 0; }
-    .nav.nav-pills.brand-pills.nav-stacked .tab-content {
+.nav.nav-pills.brand-pills.nav-stacked {
+  position: relative !important;
+  padding: 5px 0 30px 0;
+  opacity: 1;
+  /* compensate for nav being set to opacity 0 by our top nav bar code */ }
+  .nav.nav-pills.brand-pills.nav-stacked li {
+    margin: 0;
+    border-left: 1px solid lightgray; }
+    .nav.nav-pills.brand-pills.nav-stacked li:hover, .nav.nav-pills.brand-pills.nav-stacked li.active {
+      border-left: 1px solid blue;
+      font-weight: 700; }
+    .nav.nav-pills.brand-pills.nav-stacked li a {
+      color: #2a2a36;
+      background-color: transparent;
+      padding-left: 20px;
+      border-radius: 0;
+      margin: 0; }
+    .nav.nav-pills.brand-pills.nav-stacked li .tab-content {
       margin-top: 15px;
       padding-top: 5px; }
 
@@ -204,9 +203,16 @@ section {
     padding-bottom: 0px; }
   section .row {
     padding-top: 40px; }
+  section li {
+    list-style-image: url("../../img/enterprise/dot-tiny.svg"); }
 
 .section--documentation {
   padding-bottom: 170px; }
+  .section--documentation .icon {
+    height: 100px; }
+
+.section--feature .icon {
+  height: 32px; }
 
 .section--getinvolved {
   padding-top: 10px;
diff --git a/assets/css/pages/appdev.scss b/assets/css/pages/appdev.scss
index 929d48a1..474af314 100644
--- a/assets/css/pages/appdev.scss
+++ b/assets/css/pages/appdev.scss
@@ -38,10 +38,22 @@ section {
  	.row {
  		padding-top: 40px;
  	}
+ 	li {
+        list-style-image: url("../../img/enterprise/dot-tiny.svg");
+    }
 }
 
 .section--documentation {
     padding-bottom: 170px;
+    .icon {
+        height: 100px;
+    }
+}
+
+.section--feature {
+    .icon {
+        height: 32px;
+    }
 }
 
 .section--getinvolved {
diff --git a/assets/css/pages/contribute.css b/assets/css/pages/contribute.css
index 75054956..6b916b1c 100644
--- a/assets/css/pages/contribute.css
+++ b/assets/css/pages/contribute.css
@@ -43,6 +43,8 @@ footer.page-footer {
 .section--contribute {
   padding-top: 30px;
   /* 	display: inline-block; */ }
+  .section--contribute .row {
+    padding-top: 50px; }
   .section--contribute .section--heading-1 {
     padding: 80px 0 30px 0; }
   .section--contribute .section--intro {
@@ -52,6 +54,8 @@ footer.page-footer {
     @media (max-width: 768px) {
       .section--contribute .section--intro {
         text-align: left !important; } }
+  .section--contribute img {
+    padding: 15px; }
 
 .calltoaction {
   margin-top: 50px;
diff --git a/assets/css/pages/contribute.scss b/assets/css/pages/contribute.scss
index 29e1c93c..0a3f0b73 100644
--- a/assets/css/pages/contribute.scss
+++ b/assets/css/pages/contribute.scss
@@ -18,7 +18,9 @@ footer.page-footer {
 .section--contribute {
 	padding-top: 30px;
 /* 	display: inline-block; */
-
+    .row {
+        padding-top: 50px;
+    }
 	.section--heading-1 {
 		padding: 80px 0 30px 0;
 	}
@@ -32,6 +34,9 @@ footer.page-footer {
 			text-align: left !important;
 		}
 	}
+	img {
+        padding: 15px;
+    }
 }
 
 .calltoaction {
diff --git a/assets/img/headers/atwork-small.jpg b/assets/img/headers/atwork-small.jpg
new file mode 100644
index 00000000..e672b44e
--- /dev/null
+++ b/assets/img/headers/atwork-small.jpg
diff --git a/assets/img/headers/crash-small.jpg b/assets/img/headers/crash-small.jpg
new file mode 100644
index 00000000..cefb84db
--- /dev/null
+++ b/assets/img/headers/crash-small.jpg
diff --git a/assets/img/headers/design-small.jpg b/assets/img/headers/design-small.jpg
new file mode 100644
index 00000000..d453e774
--- /dev/null
+++ b/assets/img/headers/design-small.jpg
diff --git a/assets/img/headers/ladies-that-foss.jpg b/assets/img/headers/ladies-that-foss.jpg
new file mode 100644
index 00000000..10701b69
--- /dev/null
+++ b/assets/img/headers/ladies-that-foss.jpg
diff --git a/page-contribute.php b/page-contribute.php
index 622ccfb6..42c01e51 100644
--- a/page-contribute.php
+++ b/page-contribute.php
@@ -23,13 +23,14 @@
 <div class="container">
 
     <div class="row">
-        <h1 class="section--heading-1"><?php echo $l->t('Become part of the Community.');?></h1>
+        <h1 class="section--heading-1 text-center"><?php echo $l->t('Become part of the Community.');?></h1>
     </div>
     <div class="row">
-        <div class="col-md-6">
-            <a href="<?php echo home_url('files') ?>"><img src="<?php bloginfo('template_directory'); ?>/assets/img/conference/grouppic2017-small.jpg" class="img-responsive" /></a>
+        <div class="col-md-4">
+            <img src="<?php bloginfo('template_directory'); ?>/assets/img/conference/grouppic2017-small.jpg" class="img-responsive" />
+            <img src="<?php bloginfo('template_directory'); ?>/assets/img/conference/grouppic2016_wee.jpg" class="img-responsive" />
         </div>
-        <div class="col-md-6">
+        <div class="col-md-8">
             <p class="section--paragraph__tittle"><?php echo $l->t('Contribute to Nextcloud server or apps');?></p>
             <p class="section--paragraph"><?php echo $l->t('Learn about setting up a development environment or read our security guidelines, coding style and more!');?></p>
             <p class="section--paragraph"><?php echo $l->t('Improve the Nextcloud Server:');?> <a class="hyperlink"  href="<?php echo $DOCUMENTATION_DEVELOPER; ?>core"><?php echo $l->t('server development documentation');?></a>, <a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>general"><?php echo $l->t('general guidelines and setup');?></a></p>
@@ -38,31 +39,46 @@
             <p class="section--paragraph"><a class="hyperlink" href="https://transifex.com/nextcloud"><?php echo $l->t('Help translate Nextcloud.');?></a></li>
             <p class="section--paragraph"><?php echo $l->t('Talk to us on our
             <a class="hyperlink" href="https://help.nextcloud.com" target="_blank">forum</a>! We look forward to your code and thoughts.');?></p>
-            <a class="button button--white button--small" href="<?php echo home_url('developer') ?>"><?php echo $l->t('Learn more about writing Nextcloud apps');?></a>
+            <a class="button button--blue" href="<?php echo home_url('developer') ?>"><?php echo $l->t('Learn more about writing Nextcloud apps');?></a>
         </div>
     </div>
     <div class="row">
-        <div class="col-md-6 image--floated">
-            <a href="<?php echo home_url('files') ?>"><img src="<?php bloginfo('template_directory'); ?>/assets/img/events/booth.jpg" class="img-responsive" /></a>
+        <div class="col-md-4">
+            <img src="<?php bloginfo('template_directory'); ?>/assets/img/events/booth.jpg" class="img-responsive" />
         </div>
-        <div class="col-md-6">
-            <h3 class="section--intro"><?php echo $l->t('Answer questions about Nextcloud use and development');?></h3>
+        <div class="col-md-8">
+            <p class="section--paragraph__tittle"><?php echo $l->t('Answer questions about Nextcloud use and development');?></p>
             <p class="section--paragraph"><?php echo $l->t('Help answer questions users and developers have about Nextcloud!');?></p>
-            <p class="section--paragraph"><?php echo $l->t('Join the <a class="hyperlink" href="https://help.nextcloud.com">Nextcloud forums</a>!');?></p>
+            <p class="section--paragraph"><a class="" href="https://help.nextcloud.com"><?php echo $l->t('Join the Nextcloud forums');?></a></p>
             <p class="section--paragraph"><a class="hyperlink" href="<?php echo home_url('code-of-conduct') ?>"><?php echo $l->t('Please be considerate of our code of conduct</a>. We want to provide a positive and enjoyable environment for everybody.');?></p>
         </div>
     </div>
     <div class="row">
-        <div class="col-md-6">
-            <h3 class="section--intro"><?php echo $l->t('Test Nextcloud');?></h3>
+        <div class="col-md-4">
+            <img src="<?php bloginfo('template_directory'); ?>/assets/img/headers/atwork-small.jpg" class="img-responsive" />
+        </div>
+        <div class="col-md-8">
+            <p class="section--paragraph__tittle"><?php echo $l->t('Test Nextcloud');?></p>
             <p class="section--paragraph"><?php echo $l->t('Testing upcoming Nextcloud Server releases is the best way of making sure the new release can do what you need it
                 to do. And of course, only if you report a problem to us we know about it and can fix it! If you have a bug to report,
                 find the <a class="hyperlink" href="https://github.com/nextcloud/server/blob/master/.github/CONTRIBUTING.md">issue submission page</a>.');?></p>
-            <h3 class="section--intro"><?php echo $l->t('Design Nextcloud');?></h3>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-4">
+            <img src="<?php bloginfo('template_directory'); ?>/assets/img/headers/design-small.jpg" class="img-responsive" />
+        </div>
+        <div class="col-md-8">
+            <p class="section--paragraph__tittle"><?php echo $l->t('Design Nextcloud');?></p>
             <p class="section--paragraph"><?php echo $l->t('Help out with Nextcloud user interaction design or graphic design! Get involved on <a class="hyperlink"  href="design/">the design page</a>!');?></p>
         </div>
-        <div class="col-md-6">
-            <h3 class="section--intro"><?php echo $l->t('Support Nextcloud development with bounties');?></h3>
+    </div>
+    <div class="row">
+        <div class="col-md-4">
+            <img src="<?php bloginfo('template_directory'); ?>/assets/img/headers/ladies-that-foss.jpg" class="img-responsive" />
+        </div>
+        <div class="col-md-8">
+            <p class="section--paragraph__tittle"><?php echo $l->t('Support Nextcloud development with bounties');?></p>
             <p class="section--paragraph"><?php echo $l->t('Support Nextcloud development by offering some money on features you would like to have! <a class="hyperlink"  href="https://www.bountysource.com/teams/nextcloud" target="_blank">Check our Bountysource page</a>!');?>
             <p class="section--paragraph"><?php echo $l->t('Note that');?> <a class="hyperlink" href="<?php echo home_url('jobs') ?>"><?php echo $l->t('we are hiring</a>. We look especially for people who want to turn their passion into their job! When possible, we hire people from our active community base or from the wider open source community.');?></p>
         </div>
diff --git a/page-developer.php b/page-developer.php
index 67b0bda7..9f33fc38 100644
--- a/page-developer.php
+++ b/page-developer.php
@@ -26,7 +26,7 @@
                         <p>this is amazing!</p>
                     </div>
                     <div class="content">
-                        <ul>
+                        <ul class="section--paragraph">
                             <li>because I rock</li>
                             <li>because you rock</li>
                             <li>because we all rock!</li>
@@ -40,19 +40,19 @@
 </div>
 <!-- </div> -->
 
-<section class="section--intro">
+<!--<section class="section--intro">
 	<div class="container">
 		<div class="row">
 			<div class="col-md-8 col-md-offset-2">
-<!--                 <p class="section--paragraph text-center"><?php echo $l->t('Time to be creative.');?></p> -->
+                <p class="section--paragraph text-center"><?php echo $l->t('Time to be creative.');?></p>
                 <p class="section--paragraph text-center"><span class="avoidwrap"><?php echo $l->t('Everything you need to get started with Nextcloud development.');?></span></p>
                 <div class="text-center">
-                    <!--<a href="install/#install-clients" class="button button--blue button--arrow button--large"><?php echo $l->t('Download now');?></a>-->
+                    <a href="install/#install-clients" class="button button--blue button--arrow button--large"><?php echo $l->t('Download now');?></a>
                 </div>
 			</div>
 		</div>
 	</div>
-</section>
+</section>-->
 
 <!--<section>
 <div class="container">
@@ -98,82 +98,58 @@
 </section>-->
 
 <section class="section--documentation">
-<div class="container-widest">
+<div class="container">
    	<div class="row">
         <div class="col-md-6">
-            <div class="row">
-                <div class="col-md-6 image--feature new-img">
-                    <a href="https://apps.nextcloud.com"><img src="<?php bloginfo('template_directory'); ?>/assets/img/features/appstore_nw.png" class="img-responsive featureimg" /></a>
-                </div>
-                <div class="col-md-6">
-                    <p class="section--paragraph__tittle"><?php echo $l->t('Build a new application');?></p>
-                    <p class="section--paragraph"><?php echo $l->t('Write new applications on top of the Nextcloud platform.');?></p>
-                    <ul>
-                        <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>/general/devenv.html"><?php echo $l->t('Developer setup');?></a></li>
-                        <li><a class="hyperlink" href="https://apps.nextcloud.com/developer/apps/generate"><?php echo $l->t('App skeleton generator');?></a></li>
-                        <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>/app/index.html"><?php echo $l->t('App Developer intro');?></a></li>
-                        <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>/api.html"><?php echo $l->t('API documentation');?></a></li>
-                        <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>/design/index.html"><?php echo $l->t('App design guidelines');?></a></li>
-                        <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>/app/publishing.html"><?php echo $l->t('Publishing apps');?></a></li>
-                    </ul>
-                </div>
-            </div>
-		</div>
-		<div class="col-md-6">
-			<div class="row">
-                <div class="col-md-6 image--feature new-img">
-                    <a href="<?php echo home_url('talk') ?>"><img src="<?php bloginfo('template_directory'); ?>/assets/img/features/command-help.png" class="img-responsive featureimg" /></a>
-                </div>
-                <div class="col-md-6">
-                    <p class="section--paragraph__tittle"><?php echo $l->t('Extend Nextcloud');?></p>
-                    <p class="section--paragraph"><?php echo $l->t('Write a Nextcloud app to improve or change Nextcloud functionality.');?></p>
-                    <ul>
-                        <li><a class="hyperlink" href="https://github.com/nextcloud/dashboard/blob/master/README.md"><?php echo $l->t('Write a dashboard plugin');?></a></li>
-                        <!--<li><a class="hyperlink" href="tbd"><?php echo $l->t('Interact with Workflows');?></a></li>
-                        <li><a class="hyperlink" href="TBD"><?php echo $l->t('Manage guest app accounts');?></a></li>-->
-                        <li><a class="hyperlink" href="https://docs.nextcloud.com/server/15/developer_manual/core/theming.html"><?php echo $l->t('Write a theme to change the look and feel of Nextcloud');?></a></li>
-                        <li><a class="hyperlink" href="https://nextcloud-talk.readthedocs.io/en/latest/commands/"><?php echo $l->t('Write a Nextcloud Talk Command');?></a>
-                        <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>//app/two-factor-provider.html"><?php echo $l->t('Write a new 2factor authentication plugin');?></a>
-                    </ul>
-                </div>
-            </div>
-		</div>
+            <img src="<?php bloginfo('template_directory'); ?>/assets/img/icons/machine.svg" class="icon" />
+            <p class="section--paragraph__tittle"><?php echo $l->t('Build a new application');?></p>
+            <p class="section--paragraph"><?php echo $l->t('Write new applications on top of the Nextcloud platform.');?></p>
+            <ul class="section--paragraph">
+                <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>/general/devenv.html"><?php echo $l->t('Developer setup');?></a></li>
+                <li><a class="hyperlink" href="https://apps.nextcloud.com/developer/apps/generate"><?php echo $l->t('App skeleton generator');?></a></li>
+                <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>/app/index.html"><?php echo $l->t('App Developer intro');?></a></li>
+                <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>/api.html"><?php echo $l->t('API documentation');?></a></li>
+                <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>/design/index.html"><?php echo $l->t('App design guidelines');?></a></li>
+                <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>/app/publishing.html"><?php echo $l->t('Publishing apps');?></a></li>
+            </ul>
+        </div>
+        <div class="col-md-6 image--feature ">
+            <img src="<?php bloginfo('template_directory'); ?>/assets/img/icons/manual.svg" class="icon" />
+            <p class="section--paragraph__tittle"><?php echo $l->t('Extend Nextcloud');?></p>
+            <p class="section--paragraph"><?php echo $l->t('Write a Nextcloud app to improve or change Nextcloud functionality.');?></p>
+            <ul class="section--paragraph">
+                <li><a class="hyperlink" href="https://github.com/nextcloud/dashboard/blob/master/README.md"><?php echo $l->t('Write a dashboard plugin');?></a></li>
+                <!--<li><a class="hyperlink" href="tbd"><?php echo $l->t('Interact with Workflows');?></a></li>
+                <li><a class="hyperlink" href="TBD"><?php echo $l->t('Manage guest app accounts');?></a></li>-->
+                <li><a class="hyperlink" href="https://docs.nextcloud.com/server/15/developer_manual/core/theming.html"><?php echo $l->t('Write a theme to change the look and feel of Nextcloud');?></a></li>
+                <li><a class="hyperlink" href="https://nextcloud-talk.readthedocs.io/en/latest/commands/"><?php echo $l->t('Write a Nextcloud Talk Command');?></a>
+                <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>//app/two-factor-provider.html"><?php echo $l->t('Write a new 2factor authentication plugin');?></a>
+            </ul>
+        </div>
 	</div>
 	<div class="row">
 		<div class="col-md-6">
-			<div class="row">
-                <div class="col-md-6 image--feature new-img">
-                    <a href="<?php echo home_url('files') ?>"><img src="<?php bloginfo('template_directory'); ?>/assets/img/features/Various_thumbnails_in_grid_view.png" class="img-responsive featureimg" /></a>
-                </div>
-                <div class="col-md-6">
-                    <p class="section--paragraph__tittle"><?php echo $l->t('Connect to Nextcloud');?></p>
-                    <p class="section--paragraph"><?php echo $l->t('Integrate an existing software into Nextcloud.');?></p>
-                    <ul>
-                        <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>client_apis/LoginFlow/index.html"><?php echo $l->t('Login Flow');?></a></li>
-                        <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>/client_apis/index.html"><?php echo $l->t('Client APIs');?></a></li>
-                        <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_ADMIN; ?>/configuration_user/user_provisioning_api.html"><?php echo $l->t('User provisioning via REST');?></a></li>
-                        <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>/app/users.html"><?php echo $l->t('Write a new user-management backend');?></a></li>
-                        <li><a class="hyperlink" href="https://nextcloud-talk.readthedocs.io/en/latest/"><?php echo $l->t('Nextcloud Talk REST API');?></a></li>
-                    </ul>
-                </div>
-            </div>
-		</div>
+            <img src="<?php bloginfo('template_directory'); ?>/assets/img/icons/check-lock.svg" class="icon" />
+            <p class="section--paragraph__tittle"><?php echo $l->t('Connect to Nextcloud');?></p>
+            <p class="section--paragraph"><?php echo $l->t('Integrate an existing software into Nextcloud.');?></p>
+            <ul class="section--paragraph">
+                <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>client_apis/LoginFlow/index.html"><?php echo $l->t('Login Flow');?></a></li>
+                <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>/client_apis/index.html"><?php echo $l->t('Client APIs');?></a></li>
+                <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_ADMIN; ?>/configuration_user/user_provisioning_api.html"><?php echo $l->t('User provisioning via REST');?></a></li>
+                <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>/app/users.html"><?php echo $l->t('Write a new user-management backend');?></a></li>
+                <li><a class="hyperlink" href="https://nextcloud-talk.readthedocs.io/en/latest/"><?php echo $l->t('Nextcloud Talk REST API');?></a></li>
+            </ul>
+        </div>
         <div class="col-md-6">
-            <div class="row">
-                <div class="col-md-6 image--feature new-img">
-                    <a href="<?php echo home_url('workflow') ?>"><img src="<?php bloginfo('template_directory'); ?>/assets/img/features/Workflow_-_create_tag_for_PDF_conversion.png" class="img-responsive featureimg" /></a>
-                </div>
-                <div class="col-md-6">
-                    <p class="section--paragraph__tittle"><?php echo $l->t('Write new clients');?></p>
-                    <ul>
-                        <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>client_apis/LoginFlow/index.html"><?php echo $l->t('Login Flow');?></a></li>
-                        <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>/client_apis/index.html"><?php echo $l->t('Client APIs');?></a></li>
-                        <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>android_library/index.html#nextcloud-android-library"><?php echo $l->t('Access Nextcloud through our Android library');?></a></li>
-                    </ul>
-                </div>
-            </div>
-		</div>
-	</div>
+            <img src="<?php bloginfo('template_directory'); ?>/assets/img/icons/mobile.svg" class="icon" />
+            <p class="section--paragraph__tittle"><?php echo $l->t('Write new clients');?></p>
+            <ul class="section--paragraph">
+                <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>client_apis/LoginFlow/index.html"><?php echo $l->t('Login Flow');?></a></li>
+                <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>/client_apis/index.html"><?php echo $l->t('Client APIs');?></a></li>
+                <li><a class="hyperlink" href="<?php echo $DOCUMENTATION_DEVELOPER; ?>android_library/index.html#nextcloud-android-library"><?php echo $l->t('Access Nextcloud through our Android library');?></a></li>
+            </ul>
+        </div>
+    </div>
 </div>
 </section>
 
@@ -198,7 +174,8 @@
                 <a href="https://apps.nextcloud.com/apps/ocr"><img class="img-responsive" src="https://raw.githubusercontent.com/janis91/ocr/master/screenshots/sc4.png" alt="in action"/></a>
             </div>
             <div class="col-md-6  feature--block">
-                <p class="section--paragraph__tittle"><?php echo $l->t('Featured community app: Nextcloud OCR');?></p>
+                <img src="<?php bloginfo('template_directory'); ?>/assets/img/common/check.svg" class="icon" />
+                <p class="section--paragraph__tittle"><?php echo $l->t('Featured community app:');?> <br /> Nextcloud OCR</p>
                 <p class="section--paragraph"><?php echo $l->t('The app uses tesseract-js in the browser in order to process images (png, jpeg, tiff) and PDFs and saves the output file to the source folder in nextcloud. That for example enables you to search in it.');?></p>
                 <a href="https://apps.nextcloud.com/apps/ocr" class="button button--blue button--arrow button--large"><?php echo $l->t('See the OCR app');?></a>
             </div>
@@ -209,7 +186,7 @@
 <section class="section--contact quote">
 <div class="container">
     <div class="row">
-        <h2 class="text-center"><?php echo $l->t('Get help');?></h2>
+        <h2 class="text-center"><?php echo $l->t('Need help?');?></h2>
         <p class="section--paragraph text-center"><?php echo $l->t('Stuck with your app?');?></p>
         <p class="section--paragraph text-center"><?php echo $l->t('We love to help!');?></p>
         <div class="text-center morebuttondiv">
@@ -223,19 +200,20 @@
 	<div class="container">
          <div class="row feature-row">
             <div class="col-md-6 ">
-                <a href="https://apps.nextcloud.com/apps/ocr"><img class="img-responsive" src="https://gitlab.com/eneiluj/cospend-nc/wikis/uploads/044d9700ac6f7e1f965df4336f09b4ef/payb1.png" alt="in action"/></a>
+                <a href="https://apps.nextcloud.com/apps/dicomviewer"><img class="img-responsive" src="https://nextcloud.com/media/DICOM-viewer.jpg" alt="in action"/></a>
             </div>
             <div class="col-md-6  feature--block">
-                <p class="section--paragraph__tittle"><?php echo $l->t('Featured community app: Cospend');?></p>
-                <p class="section--paragraph"><?php echo $l->t('Nextcloud Cospend is a group/shared budget manager. It was inspired by the great IHateMoney.<br> You can use it when you share a house, when you go on vacation with friends, whenever you share money with others.');?></p>
-                <a href="https://nextcloud.com/blog/cospend-another-bit-in-the-nextcloud-ecosystem/" class="button button--blue button--arrow button--large"><?php echo $l->t('Read about Cospend');?></a>
+                <img src="<?php bloginfo('template_directory'); ?>/assets/img/common/check.svg" class="icon" />
+                <p class="section--paragraph__tittle"><?php echo $l->t('Featured community app:');?> <br /> Digital Imaging for Medicine</p>
+                <p class="section--paragraph"><?php echo $l->t('The DICOM Viewer allows the user to display and manipulate DICOM images with a streamlined sidebar and viewer, all without leaving Nextcloud. The sidebar parses DICOM files and displays all DICOM attributes, such as Patient ID, Patient Name, and Study Date/Time, in a convenient details panel. A critical search feature on the sidebar enables the user to quickly search for specific DICOM attributes.');?></p>
+                <a href="https://nextcloud.com/blog/digital-imaging-for-medicine-in-nextcloud/" class="button button--blue button--arrow button--large"><?php echo $l->t('Read about the DICOM viewer');?></a>
             </div>
         </div>
     </div>
 </section>
 
 <section class="section--why">
-<div class="container-widest">
+<div class="container">
 	<div class="row introduction">
         <div class="col-lg-6 col-lg-offset-3">
             <h1 class="section--heading-1 section--text--center"><?php echo $l->t('Why Nextcloud apps?');?></h1>
@@ -278,12 +256,13 @@
 	<div class="container">
          <div class="row feature-row">
             <div class="col-md-6 ">
-                <a href="https://apps.nextcloud.com/apps/ocr"><img class="img-responsive" src="https://nextcloud.com/media/DICOM-viewer.jpg" alt="in action"/></a>
+                <a href="https://apps.nextcloud.com/apps/cospend"><img class="img-responsive" src="https://gitlab.com/eneiluj/cospend-nc/wikis/uploads/044d9700ac6f7e1f965df4336f09b4ef/payb1.png" alt="in action"/></a>
             </div>
             <div class="col-md-6  feature--block">
-                <p class="section--paragraph__tittle"><?php echo $l->t('Featured community app: Digital Imaging for Medicine');?></p>
-                <p class="section--paragraph"><?php echo $l->t('The DICOM Viewer allows the user to display and manipulate DICOM images with a streamlined sidebar and viewer, all without leaving Nextcloud. The sidebar parses DICOM files and displays all DICOM attributes, such as Patient ID, Patient Name, and Study Date/Time, in a convenient details panel. A critical search feature on the sidebar enables the user to quickly search for specific DICOM attributes.');?></p>
-                <a href="https://nextcloud.com/blog/digital-imaging-for-medicine-in-nextcloud/" class="button button--blue button--arrow button--large"><?php echo $l->t('Read about the DICOM viewer');?></a>
+                <img src="<?php bloginfo('template_directory'); ?>/assets/img/common/check.svg" class="icon" />
+                <p class="section--paragraph__tittle"><?php echo $l->t('Featured community app:');?> <br /> Cospend</p>
+                <p class="section--paragraph"><?php echo $l->t('Nextcloud Cospend is a group/shared budget manager. It was inspired by the great IHateMoney.<br> You can use it when you share a house, when you go on vacation with friends, whenever you share money with others.');?></p>
+                <a href="https://nextcloud.com/blog/cospend-another-bit-in-the-nextcloud-ecosystem/" class="button button--blue button--arrow button--large"><?php echo $l->t('Read about Cospend');?></a>
             </div>
         </div>
     </div>