feature: page about

src/index.pug

@@ -52,6 +52,9 @@ html(lang="en")
 
       main#content.segment.lg-three-quarter.text-top.notLoggedIn
 
+        #about(data-view="about")
+          include views/page-about.pug
+
       //-   if endpoints.get.dashboards
       //-     #dashboard(hidden, data-view="dashboard").no-sidebar.with-padding
       //-       include views/page-dashboard.pug

src/locales/en.json

@@ -39,8 +39,8 @@
       "paragraph2": "Its mission is to empower users by enabling them to regain control of their digital tools and benefit from a network effect within a chosen ecosystem in order to emancipate themselves from large platforms."
     },
     "card2": {
-      "title": "Contact us",
+      "subTitle": "Contact us",
-      "paragraph-1": "You want to contribute, report a bug, suggest an improvement, work with us?",
+      "paragraph1": "You want to contribute, report a bug, suggest an improvement, work with us?",
       "link": "Contact"
     }
   },

src/locales/es.json

@@ -39,8 +39,8 @@
       "paragraph2": "Su misión es devolver el poder a los usuarios permitiéndoles recuperar el control de su herramienta digital y beneficiarse de un efecto de red dentro de un ecosistema elegido para emanciparse de las grandes plataformas."
     },
     "card2": {
-      "title": "Contactenos",
+      "subTitle": "Contactenos",
-      "paragraph-1": "¿Quieres contribuir, informar de un error, sugerir una mejora, trabajar con nosotrxs?",
+      "paragraph1": "¿Quieres contribuir, informar de un error, sugerir una mejora, trabajar con nosotrxs?",
       "link": "Contacto"
     }
   },

src/locales/fr.json

@@ -39,8 +39,8 @@
       "paragraph2": "Sa mission est de redonner le pouvoir aux utilisateurs en leur permettant de reprendre la main sur leur outil numérique et de bénéficier d’un effet de réseau au sein d’un écosystème choisi afin de s’émanciper des grandes plateformes."
     },
     "card2": {
-      "title": "Contacte-nous",
+      "subTitle": "Contacte-nous",
-      "paragraph-1": "Tu veux contribuer, nous remonter un bug, nous suggérer une amélioration, travailler avec nous ?",
+      "paragraph1": "Tu veux contribuer, nous remonter un bug, nous suggérer une amélioration, travailler avec nous ?",
       "link": "Contact"
     }
   },

src/styles/index.scss

@@ -6,6 +6,10 @@ main {
   background-color: pink;
 }
 
+.whitespace-normal {
+  white-space: normal;
+}
+
 @import 'header/_index';
 @import 'left-nav/_index';
 @import 'content/_index';

src/views/page-about.pug

@@ -2,17 +2,17 @@ div.segment.padding-top-small.padding-right-large.padding-bottom-small.padding-l
   h2.text-xlarge.text-color-heading.text-uppercase(data-trans='about.title')
 
   div.segment.lg-two-third.margin-top-small.padding-right-xlarge
-    div.segment.shadow.padding-top-xlarge.padding-right-xxlarge.padding-bottom-xxlarge.padding-left-xxlarge.text-center
+    div.segment.whitespace-normal.shadow.padding-top-xlarge.padding-right-xxlarge.padding-bottom-xxlarge.padding-left-xxlarge.text-center
       h3.text-color-heading.text-semibold(data-trans='about.card1.subTitle')
       div
-        p.segment.float-left.text-large(data-trans='about.card1.paragraph1')
+        p.segment.whitespace-normal.text-large(data-trans='about.card1.paragraph1')
-        p.segment.float-left.text-large(data-trans='about.card1.paragraph2')
+        p.segment.whitespace-normal.text-large(data-trans='about.card1.paragraph2')
         a.link.text-xlarge(href="https://startinblox.com/fr/" target="_blank") https://startinblox.com/fr/
 
-  div.segment.lg-third.margin-top-small
+  div.segment.lg-third.margin-top-small.text-top
-    div.segment.shadow.padding-top-xlarge.padding-right-xxlarge.padding-bottom-xxlarge.padding-left-xxlarge.text-center
+    div.segment.whitespace-normal.shadow.padding-top-xlarge.padding-right-xxlarge.padding-bottom-xxlarge.padding-left-xxlarge.text-center
-      div.segment.center.icon.icon-xlarge.rounded-third.rounded.rounded-large.icon-envelope.icon-secondary
+      div.segment.margin-top-small
+        div.segment.center.icon.icon-xlarge.rounded-third.rounded.rounded-large.icon-envelope.icon-secondary
       h3.text-color-heading.text-semibold.text-medium(data-trans='about.card2.subTitle')
-      div
+      p(data-trans='about.card2.paragraph1')
-        p.segment.float-left(data-trans='about.card2.paragraph1')
+      a.button.text-bold.text-uppercase.color-secondary.bordered(href="https://startinblox.com/fr/#home-contact" target="_blank" data-trans='about.card2.link').main-cta
-        a.button.text-bold.text-uppercase.color-secondary.bordered(href="https://startinblox.com/fr/#home-contact" target="_blank" data-trans='about.card2.link').main-cta