diff --git a/styles/apps-developer-tools.less b/styles/apps-developer-tools.less
index 969d839d2..3aa978cce 100644
--- a/styles/apps-developer-tools.less
+++ b/styles/apps-developer-tools.less
@@ -134,6 +134,12 @@
width: 816px;
}
+.tile-app-list {
+ .sample-apps {
+ display: inline;
+ }
+}
+
.slack-community-content {
margin-top: 30px;
img {
diff --git a/styles/apps-homepage.less b/styles/apps-homepage.less
index 693496741..13d83b42b 100644
--- a/styles/apps-homepage.less
+++ b/styles/apps-homepage.less
@@ -208,3 +208,7 @@
margin-top: 16px;
}
}
+
+#dev-tools-btn {
+ margin-left: 5%;
+}
diff --git a/styles/panel.less b/styles/panel.less
index 61660ebf8..ac402d6c3 100644
--- a/styles/panel.less
+++ b/styles/panel.less
@@ -145,3 +145,63 @@ hr.big {
.skew(0, 3deg);
border-top-width: 40px;
}
+
+.panel-title {
+ color: #414D97;
+ font-family: 'Lato';
+ font-style: italic;
+ font-weight: 700;
+ font-size: 26px;
+ line-height: 31px;
+ display: flex;
+
+ margin-top: 12px;
+ margin-bottom: 15px;
+}
+
+.panel-custom {
+ box-sizing: border-box;
+
+ width: 1026px;
+ height: 150px;
+ left: 210px;
+ top: 678px;
+
+ background: #FFFFFF;
+
+ border: 1px solid #4CA8E0;
+ border-radius: 10px;
+
+ .panel-body {
+ padding: 8px;
+ }
+}
+
+.feature-check-out {
+ font-family: 'Lato';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 19px;
+ line-height: 23px;
+}
+
+.github-link {
+ color: #414D97;
+ font-style: italic;
+ font-weight: 500;
+}
+
+.feature-description {
+ font-family: 'Lato';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 19px;
+}
+
+.whats-new-img {
+ max-width: 136px;
+ max-height: 136px;
+ margin-right: 50px;
+ margin-left: 40px;
+}
diff --git a/tasks/build-doc.js b/tasks/build-doc.js
index d2741c0bd..a686b5d4a 100644
--- a/tasks/build-doc.js
+++ b/tasks/build-doc.js
@@ -675,22 +675,43 @@ gulp.task('build-app-developer-tools', ['clean-dist','less'], function () {
'create-custom-app.md': 'Custom apps'
};
- const startApp = {
- 'title': 'Start Apps',
- 'badge_name' : 'New',
- 'content': 'Starter for bootstraping your first Akeneo App quickly.',
- 'image': 'apps/dev-tools-langages.svg',
- 'rows': [
- {
- 'image': 'icons/icon--github.png',
- 'content': 'Github repository:',
- 'breakline': true,
- 'link': 'https://github.com/akeneo/sample-apps',
- 'link_content': 'akeneo/sample-apps',
- }
- ],
- 'author': 'By Akeneo'
- };
+ const sampleApps = [
+ {
+ 'anchor': 'sample-apps',
+ 'section': 'Start with Sample Apps',
+ 'title': 'Start Apps',
+ 'content': 'Starter for bootstraping your first Akeneo App quickly.',
+ 'image': 'apps/dev-tools-langages.svg',
+ 'rows': [
+ {
+ 'image': 'icons/icon--github.png',
+ 'content': 'Github repository:',
+ 'breakline': true,
+ 'link': 'https://github.com/akeneo/sample-apps',
+ 'link_content': 'akeneo/sample-apps',
+ }
+ ],
+ 'author': 'By Akeneo'
+ },
+ {
+ 'anchor': 'dataset-app',
+ 'section': 'Test your App',
+ 'title': 'Dataset App',
+ 'badge_name' : 'New',
+ 'content': 'Automate the integration of large volumes of PIM data to test your App scalability and performance.',
+ 'image': 'apps/dev-tools-php.svg',
+ 'rows': [
+ {
+ 'image': 'icons/icon--github.png',
+ 'content': 'Github repository:',
+ 'breakline': true,
+ 'link': 'https://github.com/akeneo/dataset-app',
+ 'link_content': 'akeneo/dataset-app',
+ }
+ ],
+ 'author': 'By Akeneo'
+ }
+ ];
const apiTools = [
{
@@ -767,7 +788,7 @@ gulp.task('build-app-developer-tools', ['clean-dist','less'], function () {
return gulp.src('src/partials/apps-developer-tools.handlebars')
.pipe(gulpHandlebars({
active_apps: true,
- startApp : startApp,
+ sampleApps : sampleApps,
apiTools : apiTools,
app : app,
mainContent: fs.readFileSync('tmp/apps/' + path.basename(file.path).replace(/\.md/, '.html')),