Merge pull request #2326 from wallabag/update-quickstart

Changed quickstart layout

app/Resources/static/themes/material/css/main.css

@@ -411,12 +411,12 @@ main ul.row {
 }
 
 .card .card-action a {
-  color: #fff;
+  color: #fff !important;
   margin: 0;
 }
 
 .card .card-action a:hover {
-  color: #fff;
+  color: #fff !important;
 }
 
 .settings .div_tabs {

src/Wallabag/CoreBundle/Resources/translations/messages.da.yml

@@ -268,12 +268,14 @@ howto:
 
 quickstart:
     # page_title: 'Quickstart'
+    # more: 'More…'
     # intro:
     #     title: 'Welcome to wallabag!'
     #     paragraph_1: "We'll accompany you to visit wallabag and show you some features which can interest you."
     #     paragraph_2: 'Follow us!'
     # configure:
     #     title: 'Configure the application'
+    #     description: 'In order to have an application which suits you, have a look into the configuration of wallabag.'
     #     language: 'Change language and design'
     #     rss: 'Enable RSS feeds'
     #     tagging_rules: 'Write rules to automatically tag your articles'
@@ -287,6 +289,7 @@ quickstart:
     #     import: 'Configure import'
     # first_steps:
     #     title: 'First steps'
+    #     description: "Now wallabag is well configured, it's time to archive the web. You can click on the top right sign + to add a link."
     #     new_article: 'Save your first article'
     #     unread_articles: 'And classify it!'
     # migrate:
@@ -296,11 +299,15 @@ quickstart:
     #     wallabag_v1: 'Migrate from wallabag v1'
     #     wallabag_v2: 'Migrate from wallabag v2'
     #     readability: 'Migrate from Readability'
+    #     instapaper: 'Migrate from Instapaper'
     # developer:
     #     title: 'Developers'
+    #     description: 'We also thought to the developers: Docker, API, translations, etc.'
     #     create_application: 'Create your third application'
+    #     use_docker: 'Use Docker to install wallabag'
     # docs:
     #     title: 'Full documentation'
+    #     description: "There are so much features in wallabag. Don't hesitate to read the manual to know them and to learn how to use them."
     #     annotate: 'Annotate your article'
     #     export: 'Convert your articles into ePUB or PDF'
     #     search_filters: 'See how you can look for an article by using search engine and filters'

src/Wallabag/CoreBundle/Resources/translations/messages.de.yml

@@ -268,12 +268,14 @@ howto:
 
 quickstart:
     page_title: 'Schnelleinstieg'
+    # more: 'More…'
     intro:
         title: 'Willkommen zu wallabag!'
         paragraph_1: "Wir werden dich bei der Benutzung von wallabag begleiten und dir einige Funktionen zeigen, die dich interessieren könnten."
         paragraph_2: 'Folge uns!'
     configure:
         title: 'Anwendung konfigurieren'
+        # description: 'In order to have an application which suits you, have a look into the configuration of wallabag.'
         language: 'Sprache und Design ändern'
         rss: 'RSS-Feeds aktivieren'
         tagging_rules: 'Schreibe Regeln, um deine Beiträge automatisch zu taggen (verschlagworten)'
@@ -287,6 +289,7 @@ quickstart:
         import: 'Import-Einstellungen ändern'
     first_steps:
         title: 'Erste Schritte'
+        # description: "Now wallabag is well configured, it's time to archive the web. You can click on the top right sign + to add a link"
         new_article: 'Speichere deinen ersten Artikel'
         unread_articles: 'Und klassifiziere ihn!'
     migrate:
@@ -296,11 +299,15 @@ quickstart:
         wallabag_v1: 'von wallabag v1 migrieren'
         wallabag_v2: 'von wallabag v2 migrieren'
         readability: 'von Readability migrieren'
+        instapaper: 'von Instapaper migrieren'
     developer:
         title: 'Entwickler'
+        # description: 'We also thought to the developers: Docker, API, translations, etc.'
         create_application: 'Erstelle eine Anwendung und nutze die wallabag API'
+        # use_docker: 'Use Docker to install wallabag'
     docs:
         title: 'Komplette Dokumentation'
+        # description: "There are so much features in wallabag. Don't hesitate to read the manual to know them and to learn how to use them."
         annotate: 'Anmerkungen zu Artikeln hinzufügen'
         export: 'Artikel nach ePUB oder PDF konvertieren'
         search_filters: 'Schau nach, wie du nach einem Artikel über die Such- und Filterfunktion suchen kannst'

src/Wallabag/CoreBundle/Resources/translations/messages.en.yml

@@ -268,12 +268,14 @@ howto:
 
 quickstart:
     page_title: 'Quickstart'
+    more: 'More…'
     intro:
         title: 'Welcome to wallabag!'
         paragraph_1: "We'll accompany you on your visit to wallabag and show you some features that might interest you."
         paragraph_2: 'Follow us!'
     configure:
         title: 'Configure the application'
+        description: 'In order to have an application which suits you, have a look into the configuration of wallabag.'
         language: 'Change language and design'
         rss: 'Enable RSS feeds'
         tagging_rules: 'Write rules to automatically tag your articles'
@@ -287,6 +289,7 @@ quickstart:
         import: 'Configure import'
     first_steps:
         title: 'First steps'
+        description: "Now wallabag is well configured, it's time to archive the web. You can click on the top right sign + to add a link."
         new_article: 'Save your first article'
         unread_articles: 'And classify it!'
     migrate:
@@ -296,11 +299,15 @@ quickstart:
         wallabag_v1: 'Migrate from wallabag v1'
         wallabag_v2: 'Migrate from wallabag v2'
         readability: 'Migrate from Readability'
+        instapaper: 'Migrate from Instapaper'
     developer:
         title: 'Developers'
+        description: 'We also thought to the developers: Docker, API, translations, etc.'
         create_application: 'Create your third application'
+        use_docker: 'Use Docker to install wallabag'
     docs:
         title: 'Full documentation'
+        description: "There are so much features in wallabag. Don't hesitate to read the manual to know them and to learn how to use them."
         annotate: 'Annotate your article'
         export: 'Convert your articles into ePUB or PDF'
         search_filters: 'See how you can look for an article by using the search engine and filters'

src/Wallabag/CoreBundle/Resources/translations/messages.es.yml

@@ -268,12 +268,14 @@ howto:
 
 quickstart:
     page_title: 'Comienzo rápido'
+    # more: 'More…'
     intro:
         title: 'Bienvenido a wallabag !'
         paragraph_1: "Le acompañaremos a su visita de wallabag y le mostraremos algunas características que le pueden interesar."
         paragraph_2: '¡Síganos!'
     configure:
         title: 'Configure la aplicación'
+        # description: 'In order to have an application which suits you, have a look into the configuration of wallabag.'
         language: 'Cambie el idioma y el diseño de la aplicación'
         rss: 'Activar los feeds RSS'
         tagging_rules: 'Escribir reglas para etiquetear automaticamente sus artículos'
@@ -287,6 +289,7 @@ quickstart:
         import: 'Configure importación'
     first_steps:
         title: 'Primeros pasos'
+        # description: "Now wallabag is well configured, it's time to archive the web. You can click on the top right sign + to add a link."
         new_article: 'Guarde su primer artículo'
         unread_articles: '¡Y clasifíquelo!'
     migrate:
@@ -296,11 +299,15 @@ quickstart:
         wallabag_v1: 'Migrar desde wallabag v1'
         wallabag_v2: 'Migrar desde wallabag v2'
         readability: 'Migrar desde Readability'
+        instapaper: 'Migrar desde Instapaper'
     developer:
         title: 'Promotores'
+        # description: 'We also thought to the developers: Docker, API, translations, etc.'
         create_application: 'Cree su tercera aplicación'
+        # use_docker: 'Use Docker to install wallabag'
     docs:
         title: 'Documentación completa'
+        # description: "There are so much features in wallabag. Don't hesitate to read the manual to know them and to learn how to use them."
         annotate: 'Anote su artículo'
         export: 'Convierta sus artículos a ePub o a PDF'
         search_filters: 'Aprenda a utilizar el buscador y los filtros para encontrar el artículo que le interese'

src/Wallabag/CoreBundle/Resources/translations/messages.fa.yml

@@ -268,6 +268,7 @@ howto:
 
 quickstart:
     page_title: 'Quickstart'
+    # more: 'More…'
     intro:
         title: 'به wallabag خوش آمدید!!'
         paragraph_1: "به شما کمک خواهیم کرد تا wallabag را بشناسید و با برخی از ویژگی‌های جالبش آشنا شوید"
@@ -287,6 +288,7 @@ quickstart:
         import: 'درون‌ریزی را تنظیم کنید'
     first_steps:
         title: 'گام نخست'
+        # description: "Now wallabag is well configured, it's time to archive the web. You can click on the top right sign + to add a link."
         new_article: 'نخستین مقالهٔ خود را ذخیره کنید'
         unread_articles: 'و آن را طبقه‌بندی کنید!'
     migrate:
@@ -296,11 +298,15 @@ quickstart:
         wallabag_v1: 'مهاجرت از نسخهٔ یکم wallabag'
         wallabag_v2: 'مهاجرت از نسخهٔ دوم wallabag'
         readability: 'مهاجرت از نسخهٔ دوم Readability'
+        instapaper: 'مهاجرت از نسخهٔ دوم Instapaper'
     developer:
         title: 'برنامه‌نویسان'
+        # description: 'We also thought to the developers: Docker, API, translations, etc.'
         create_application: 'برنامهٔ wallabag خود را بسازید'
+        # use_docker: 'Use Docker to install wallabag'
     docs:
         title: 'راهنمای کامل'
+        # description: "There are so much features in wallabag. Don't hesitate to read the manual to know them and to learn how to use them."
         annotate: 'روی مقاله‌هایتان یادداشت بگذارید'
         export: 'مقاله‌هایتان را به قالب ePUB یا PDF دربیاورید'
         search_filters: 'به کمک موتور جستجو و فیلترها به دنبال مقاله‌هایتان بگردید'

src/Wallabag/CoreBundle/Resources/translations/messages.fr.yml

@@ -268,12 +268,14 @@ howto:
 
 quickstart:
     page_title: 'Pour bien débuter'
+    more: 'Et plus encore…'
     intro:
         title: 'Bienvenue sur wallabag !'
         paragraph_1: "Nous allons vous accompagner pour vous faire faire le tour de la maison et vous présenter quelques fonctionnalités qui pourraient vous intéresser pour vous approprier cet outil."
         paragraph_2: 'Suivez-nous !'
     configure:
         title: "Configurez l'application"
+        description: 'Pour voir une application qui vous correspond, allez voir du côté de la configuration de wallabag.'
         language: "Changez la langue et le design de l'application"
         rss: 'Activez les flux RSS'
         tagging_rules: 'Écrivez des règles pour classer automatiquement vos articles'
@@ -287,6 +289,7 @@ quickstart:
         import: "Configurer l'import"
     first_steps:
         title: 'Premiers pas'
+        description: "Maintenant que wallabag est bien configuré, il est temps d'archiver le web. Vous pouvez cliquer sur le signe + dans le coin en haut à droite."
         new_article: 'Ajoutez votre premier article'
         unread_articles: 'Et rangez-le !'
     migrate:
@@ -296,11 +299,15 @@ quickstart:
         wallabag_v1: 'Migrer depuis wallabag v1'
         wallabag_v2: 'Migrer depuis wallabag v2'
         readability: 'Migrer depuis Readability'
+        instapaper: 'Migrer depuis Instapaper'
     developer:
         title: 'Pour les développeurs'
+        description: 'Nous avons aussi pensé aux développeurs : Docker, API, traductions, etc.'
         create_application: 'Créer votre application tierce'
+        use_docker: 'Utiliser Docker pour installer wallabag'
     docs:
         title: 'Documentation complète'
+        description: "Il y a tellement de fonctionnalités dans wallabag. N'hésitez pas à lire le manuel pour les connaitre et apprendre comment les utiliser."
         annotate: 'Annoter votre article'
         export: 'Convertissez vos articles en ePub ou en PDF'
         search_filters: "Apprenez à utiliser le moteur de recherche et les filtres pour retrouver l'article qui vous intéresse"

src/Wallabag/CoreBundle/Resources/translations/messages.it.yml

@@ -267,12 +267,14 @@ howto:
 
 quickstart:
     page_title: 'Introduzione'
+    # more: 'More…'
     intro:
         title: 'Benvenuto su wallabag!'
         paragraph_1: "Un tour in cui ti guideremo per scoprire e che ti mostrerà delle funzionalità che potrebbero interessarti."
         paragraph_2: 'Seguici!'
     configure:
         title: "Configura l'applicazione"
+        # description: 'In order to have an application which suits you, have a look into the configuration of wallabag.'
         language: 'Cambia lingua e design'
         rss: 'Abilita i feed RSS'
         tagging_rules: 'Scrivi delle regole per taggare automaticamente i contenuti'
@@ -286,6 +288,7 @@ quickstart:
         import: "Configura l'importazione"
     first_steps:
         title: 'Pimi passi'
+        # description: "Now wallabag is well configured, it's time to archive the web. You can click on the top right sign + to add a link."
         new_article: 'Salva il tuo primo contenuto'
         unread_articles: 'E classificalo!'
     migrate:
@@ -295,11 +298,15 @@ quickstart:
         wallabag_v1: 'Trasferisci da wallabag v1'
         wallabag_v2: 'Trasferisci da wallabag v2'
         readability: 'Trasferisci da Readability'
+        instapaper: 'Trasferisci da Instapaper'
     developer:
         title: 'Sviluppatori'
+        # description: 'We also thought to the developers: Docker, API, translations, etc.'
         create_application: 'Crea la tua applicazione'
+        # use_docker: 'Use Docker to install wallabag'
     docs:
         title: 'Documentazione completa'
+        # description: "There are so much features in wallabag. Don't hesitate to read the manual to know them and to learn how to use them."
         annotate: 'Annota il tuo contenuto'
         export: 'Converti i tuoi contenuti in EPUB o PDF'
         search_filters: 'Impara come puoi recuperare un contenuto tramite la ricerca e i filtri'

src/Wallabag/CoreBundle/Resources/translations/messages.oc.yml

@@ -268,12 +268,14 @@ howto:
 
 quickstart:
     page_title: 'Per ben començar'
+    # more: 'More…'
     intro:
         title: 'Benvenguda sus wallabag !'
         paragraph_1: "Anem vos guidar per far lo torn de la proprietat e vos presentar unas fonccionalitats que vos poirián interessar per vos apropriar aquesta aisina."
         paragraph_2: 'Seguètz-nos '
     configure:
         title: "Configuratz l'aplicacio"
+        # description: 'In order to have an application which suits you, have a look into the configuration of wallabag.'
         language: "Cambiatz la lenga e l'estil de l'aplicacion"
         rss: 'Activatz los fluxes RSS'
         tagging_rules: 'Escrivètz de règlas per classar automaticament vòstres articles'
@@ -287,6 +289,7 @@ quickstart:
         import: 'Configurar los impòrt'
     first_steps:
         title: 'Primièrs passes'
+        # description: "Now wallabag is well configured, it's time to archive the web. You can click on the top right sign + to add a link."
         new_article: 'Ajustatz vòstre primièr article'
         unread_articles: 'E racaptatz-lo !'
     migrate:
@@ -296,11 +299,15 @@ quickstart:
         wallabag_v1: 'Migrar dempuèi wallabag v1'
         wallabag_v2: 'Migrar dempuèi wallabag v2'
         readability: 'Migrar dempuèi Readability'
+        instapaper: 'Migrar dempuèi Instapaper'
     developer:
         title: 'Pels desvolopadors'
+        # description: 'We also thought to the developers: Docker, API, translations, etc.'
         create_application: 'Crear vòstra aplicacion tèrça'
+        # use_docker: 'Use Docker to install wallabag'
     docs:
         title: 'Documentacion complèta'
+        # description: "There are so much features in wallabag. Don't hesitate to read the manual to know them and to learn how to use them."
         annotate: 'Anotatar vòstre article'
         export: 'Convertissètz vòstres articles en ePub o en PDF'
         search_filters: "Aprenètz a utilizar lo motor de recèrca e los filtres per retrobar l'article que vos interèssa"

src/Wallabag/CoreBundle/Resources/translations/messages.pl.yml

@@ -268,12 +268,14 @@ howto:
 
 quickstart:
     page_title: 'Szybki start'
+    # more: 'More…'
     intro:
          title: 'Witaj w wallabag!'
          paragraph_1: "Będziemy ci towarzyszyli w Twojej poznaniu wallabag i pokażemy możliwości, które mogą cię zainteresować."
          paragraph_2: 'Śledź nas!'
     configure:
          title: 'Konfiguruj aplikację'
+         description: 'In order to have an application which suits you, have a look into the configuration of wallabag.'
          language: 'Zmień język i wygląd'
          rss: 'Włącz kanały RSS'
          tagging_rules: 'Napisz reguły pozwalające na automatyczne otagowanie twoich artykułów'
@@ -287,6 +289,7 @@ quickstart:
          import: 'Skonfigurować import'
     first_steps:
         title: 'Pierwsze kroki'
+        # description: "Now wallabag is well configured, it's time to archive the web. You can click on the top right sign + to add a link"
         new_article: 'Zapisz swój pierwszy artukuł'
         unread_articles: 'I sklasyfikuj go!'
     migrate:
@@ -296,11 +299,15 @@ quickstart:
         wallabag_v1: 'Migruj z wallabag v1'
         wallabag_v2: 'Migruj z wallabag v2'
         readability: 'Migruj z Readability'
+        instapaper: 'Migruj z Instapaper'
     developer:
         title: 'Deweloperzy'
+        # description: 'We also thought to the developers: Docker, API, translations, etc.'
         create_application: 'Stwórz swoją aplikację'
+        # use_docker: 'Use Docker to install wallabag'
     docs:
         title: 'Pełna Dokumentacja'
+        # description: "There are so much features in wallabag. Don't hesitate to read the manual to know them and to learn how to use them."
         annotate: 'Dadaj adnotację do swojego artykułu'
         export: 'Konwertuj swoje artykuły do ePUB lub PDF'
         search_filters: 'Zabacz jak możesz znaleźć artykuł dzięku użyciu silnika wyszukiwarki i filtrów'

src/Wallabag/CoreBundle/Resources/translations/messages.ro.yml

@@ -268,12 +268,14 @@ howto:
 
 quickstart:
     # page_title: 'Quickstart'
+    # more: 'More…'
     # intro:
     #     title: 'Welcome to wallabag!'
     #     paragraph_1: "We'll accompany you to visit wallabag and show you some features which can interest you."
     #     paragraph_2: 'Follow us!'
     # configure:
     #     title: 'Configure the application'
+    #     description: 'In order to have an application which suits you, have a look into the configuration of wallabag.'
     #     language: 'Change language and design'
     #     rss: 'Enable RSS feeds'
     #     tagging_rules: 'Write rules to automatically tag your articles'
@@ -287,6 +289,7 @@ quickstart:
     #     import: 'Configure import'
     # first_steps:
     #     title: 'First steps'
+    #     description: "Now wallabag is well configured, it's time to archive the web. You can click on the top right sign + to add a link."
     #     new_article: 'Save your first article'
     #     unread_articles: 'And classify it!'
     # migrate:
@@ -296,11 +299,15 @@ quickstart:
     #     wallabag_v1: 'Migrate from wallabag v1'
     #     wallabag_v2: 'Migrate from wallabag v2'
     #     readability: 'Migrate from Readability'
+    #     instapaper: 'Migrate from Instapaper'
     # developer:
     #     title: 'Developers'
+    #     description: 'We also thought to the developers: Docker, API, translations, etc.'
     #     create_application: 'Create your third application'
+    #     use_docker: 'Use Docker to install wallabag'
     # docs:
     #     title: 'Full documentation'
+    #     description: "There are so much features in wallabag. Don't hesitate to read the manual to know them and to learn how to use them."
     #     annotate: 'Annotate your article'
     #     export: 'Convert your articles into ePUB or PDF'
     #     search_filters: 'See how you can look for an article by using search engine and filters'

src/Wallabag/CoreBundle/Resources/translations/messages.tr.yml

@@ -267,12 +267,14 @@ howto:
 
 quickstart:
     page_title: 'Hızlı başlangıç'
+    # more: 'More…'
     intro:
         title: 'wallabag'
         paragraph_1: "wallabag kurduğunuz için teşekkür ederiz. Bu sayfada biz size eşlik edecek ve ilginizi çekecek birkaç özellik göstereceğim."
         paragraph_2: 'Bizi takip edin!'
     configure:
         title: 'Uygulamayı Yapılandırma'
+        # description: 'In order to have an application which suits you, have a look into the configuration of wallabag.'
         language: 'Dili ve tasarımı değiştirme'
         rss: 'RSS akışını aktifleştirme'
         # tagging_rules: 'Write rules to automatically tag your articles'
@@ -286,6 +288,7 @@ quickstart:
         # import: 'Configure import'
     first_steps:
         title: 'İlk adım'
+        # description: "Now wallabag is well configured, it's time to archive the web. You can click on the top right sign + to add a link."
         new_article: 'İlk makalenizi kaydedin'
         unread_articles: 'Ve bunu sınıflandırın!'
     migrate:
@@ -295,11 +298,15 @@ quickstart:
         wallabag_v1: "wallabag v1 üzerindeki verilerinizi wallabag'in yeni sürümüne aktarın"
         wallabag_v2: "wallabag v2 üzerindeki verilerinizi wallabag'in yeni sürümüne aktarın"
         readability: "Readability üzerindeki verilerinizi wallabag'e aktarın'"
+        instapaper: "Instapaper üzerindeki verilerinizi wallabag'e aktarın'"
     developer:
         # title: 'Developers'
+        # description: 'We also thought to the developers: Docker, API, translations, etc.'
         # create_application: 'Create your third application'
+        # use_docker: 'Use Docker to install wallabag'
     docs:
         title: 'Dokümantasyon'
+        # description: "There are so much features in wallabag. Don't hesitate to read the manual to know them and to learn how to use them."
         # annotate: 'Annotate your article'
         export: 'Makalelerinizi ePUB ya da PDF formatına çevirme'
         search_filters: 'Makaleleri görüntülemek için arama motorlarını ve filteri kullanma'

src/Wallabag/CoreBundle/Resources/views/themes/common/Static/quickstart.html.twig

@@ -10,65 +10,107 @@
 
                 <div class="row">
                     <h3>{{ 'quickstart.intro.title'|trans }}</h3>
-                    <p>{{ 'quickstart.intro.paragraph_1'|trans }}</p>
-                    <p>{{ 'quickstart.intro.paragraph_2'|trans }}</p>
 
-                    <h4>{{ 'quickstart.configure.title'|trans }}</h4>
+                    <ul class="row data">
+                        <li class="col l4 m6 s12">
+                            <div class="card teal darken-1">
+                                <div class="card-content white-text">
+                                    <span class="card-title">{{ 'quickstart.configure.title'|trans }}</span>
+                                    <p>{{ 'quickstart.configure.description'|trans }}</p>
+                                </div>
+                                <div class="card-action">
                                     <ul>
                                         <li><a href="{{ path('config') }}">{{ 'quickstart.configure.language'|trans }}</a></li>
                                         <li><a href="{{ path('config') }}#set2">{{ 'quickstart.configure.rss'|trans }}</a></li>
-                        <li><a href="{{ path('config') }}#set5">{{ 'quickstart.configure.tagging_rules'|trans }}</a></li>
+                                        <li><a href="{{ path('config') }}#set5">{{ 'quickstart.more'|trans }}</a></li>
                                     </ul>
+                                </div>
+                            </div>
+                        </li>
 
-                    {% if is_granted('ROLE_SUPER_ADMIN') %}
+                        <li class="col l4 m6 s12">
-                    <h4>{{ 'quickstart.admin.title'|trans }}</h4>
+                            <div class="card green darken-1">
-                    <p>{{ 'quickstart.admin.description'|trans }}</p>
+                                <div class="card-content white-text">
-                    <ul>
+                                    <span class="card-title">{{ 'quickstart.first_steps.title'|trans }}</span>
-                        <li><a href="{{ path('config') }}#set6">{{ 'quickstart.admin.new_user'|trans }}</a></li>
+                                    <p>{{ 'quickstart.first_steps.description'|trans }}</p>
-                        <li><a href="{{ path('craue_config_settings_modify') }}#set-analytics">{{ 'quickstart.admin.analytics'|trans }}</a></li>
+                                </div>
-                        <li><a href="{{ path('craue_config_settings_modify') }}#set-entry">{{ 'quickstart.admin.sharing'|trans }}</a></li>
+                                <div class="card-action">
-                        <li><a href="{{ path('craue_config_settings_modify') }}#set-export">{{ 'quickstart.admin.export'|trans }}</a></li>
-                        <li><a href="{{ path('craue_config_settings_modify') }}#set-import">{{ 'quickstart.admin.import'|trans }}</a></li>
-                    </ul>
-                    {% endif %}
-
-                    <h4>{{ 'quickstart.first_steps.title'|trans }}</h4>
                                     <ul>
                                         <li><a href="{{ path('new') }}">{{ 'quickstart.first_steps.new_article'|trans }}</a></li>
                                         <li><a href="{{ path('unread') }}">{{ 'quickstart.first_steps.unread_articles'|trans }}</a></li>
                                     </ul>
+                                </div>
+                            </div>
+                        </li>
 
-                    <h4>{{ 'quickstart.migrate.title'|trans }}</h4>
+                        <li class="col l4 m6 s12">
+                            <div class="card light-green darken-1">
+                                <div class="card-content white-text">
+                                    <span class="card-title">{{ 'quickstart.migrate.title'|trans }}</span>
                                     <p>{{ 'quickstart.migrate.description'|trans }}</p>
+                                </div>
+                                <div class="card-action">
                                     <ul>
                                         <li><a href="{{ path('import_pocket') }}">{{ 'quickstart.migrate.pocket'|trans }}</a></li>
-                        <li><a href="{{ path('import_wallabag_v1') }}">{{ 'quickstart.migrate.wallabag_v1'|trans }}</a></li>
-                        <li><a href="{{ path('import_wallabag_v2') }}">{{ 'quickstart.migrate.wallabag_v2'|trans }}</a></li>
                                         <li><a href="{{ path('import_readability') }}">{{ 'quickstart.migrate.readability'|trans }}</a></li>
+                                        <li><a href="{{ path('import_instapaper') }}">{{ 'quickstart.migrate.instapaper'|trans }}</a></li>
+                                        <li><a href="{{ path('import') }}">{{ 'quickstart.more'|trans }}</a></li>
                                     </ul>
+                                </div>
+                            </div>
+                        </li>
 
-                    <h4>{{ 'quickstart.developer.title'|trans }}</h4>
+                        <li class="col l4 m6 s12">
+                            <div class="card blue darken-1">
+                                <div class="card-content white-text">
+                                    <span class="card-title">{{ 'quickstart.developer.title'|trans }}</span>
+                                    <p>{{ 'quickstart.developer.description'|trans }}</p>
+                                </div>
+                                <div class="card-action">
                                     <ul>
                                         <li><a href="{{ path('developer') }}">{{ 'quickstart.developer.create_application'|trans }}</a></li>
+                                        <li><a href="http://doc.wallabag.org/en/master/developer/docker.html">{{ 'quickstart.developer.use_docker'|trans }}</a></li>
+                                        <li><a href="http://doc.wallabag.org/en/master/index.html#dev-docs">{{ 'quickstart.more'|trans }}</a></li>
                                     </ul>
+                                </div>
+                            </div>
+                        </li>
 
-                    <h4>{{ 'quickstart.docs.title'|trans }}</h4>
+                        <li class="col l4 m6 s12">
+                            <div class="card light-blue darken-1">
+                                <div class="card-content white-text">
+                                    <span class="card-title">{{ 'quickstart.docs.title'|trans }}</span>
+                                    <p>{{ 'quickstart.docs.description'|trans }}</p>
+                                </div>
+                                <div class="card-action">
                                     <ul>
                                         <li><a href="http://doc.wallabag.org/en/master/user/annotations.html">{{ 'quickstart.docs.annotate'|trans }}</a></li>
                                         <li><a href="http://doc.wallabag.org/en/master/user/download_articles.html">{{ 'quickstart.docs.export'|trans }}</a></li>
-                        <li><a href="http://doc.wallabag.org/en/master/user/filters.html">{{ 'quickstart.docs.search_filters'|trans }}</a></li>
-                        <li><a href="http://doc.wallabag.org/en/master/user/errors_during_fetching.html">{{ 'quickstart.docs.fetching_errors'|trans }}</a></li>
                                         <li><a href="http://doc.wallabag.org/">{{ 'quickstart.docs.all_docs'|trans }}</a></li>
                                     </ul>
+                                </div>
+                            </div>
+                        </li>
 
-                    <h4>{{ 'quickstart.support.title'|trans }}</h4>
+                        <li class="col l4 m6 s12">
+                            <div class="card cyan darken-1">
+                                <div class="card-content white-text">
+                                    <span class="card-title">{{ 'quickstart.support.title'|trans }}</span>
                                     <p>{{ 'quickstart.support.description'|trans }}</p>
+                                </div>
+                                <div class="card-action">
                                     <ul>
                                         <li><a href="https://github.com/wallabag/wallabag/issues/">{{ 'quickstart.support.github'|trans }}</a></li>
                                         <li><a href="mailto:hello@wallabag.org">{{ 'quickstart.support.email'|trans }}</a></li>
                                         <li><a href="https://gitter.im/wallabag/wallabag">{{ 'quickstart.support.gitter'|trans }}</a></li>
                                     </ul>
                                 </div>
+                            </div>
+                        </li>
+
+                    </ul>
+
+                </div>
 
             </div>
         </div>

tests/Wallabag/CoreBundle/Controller/EntryControllerTest.php

@@ -29,7 +29,7 @@ class EntryControllerTest extends WallabagCoreTestCase
 
         $this->assertEquals(200, $client->getResponse()->getStatusCode());
         $this->assertGreaterThan(1, $body = $crawler->filter('body')->extract(['_text']));
-        $this->assertContains('quickstart.intro.paragraph_1', $body[0]);
+        $this->assertContains('quickstart.intro.title', $body[0]);
 
         // Test if quickstart is disabled when user has 1 entry
         $crawler = $client->request('GET', '/new');