From cc6d347172050f910c0a380f1d7060e10e93e1dc Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Wed, 9 Dec 2020 13:55:06 +0100
Subject: [PATCH] feature: page about

---
 src/page-about.pug                            | 29 ++++++++++---------
 src/styles/hubl-framework/buttons/_index.scss |  1 +
 .../icons/simple-line-icons.scss              |  1 -
 .../hubl-framework/segments/positions.scss    |  3 ++
 src/styles/index.scss                         |  9 ++++++
 5 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/page-about.pug b/src/page-about.pug
index 98870a6..ee0ad1b 100644
--- a/src/page-about.pug
+++ b/src/page-about.pug
@@ -1,17 +1,18 @@
-.views-container
-  h2(data-trans='about.title')
-  div.flex-content-white
-    div
-      div
-        h3(data-trans='about.card1.subTitle')
-        p(data-trans='about.card1.paragraph1')
-        p(data-trans='about.card1.paragraph2')
-      div
-        a(href="https://startinblox.com/fr/" target="_blank") https://startinblox.com/fr/
+div.segment.padding-top-small.padding-right-large.padding-bottom-small.padding-left-large.clearfix
+  h2.text-xlarge.text-color-heading.text-uppercase(data-trans='about.title')
 
-    div
+  div.segment.lg-two-third.margin-top-small.padding-right-xlarge.float-left
+    div.segment.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
-        h3(data-trans='about.card2.subTitle')
-        p(data-trans='about.card2.paragraph1')
+        p.segment.float-left.text-large(data-trans='about.card1.paragraph1')
+        p.segment.float-left.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.float-left
+    div.segment.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
+      h3.text-color-heading.text-semibold.text-medium(data-trans='about.card2.subTitle')
       div
-        a(href="https://startinblox.com/fr/#home-contact" target="_blank" data-trans='about.card2.link').main-cta
\ No newline at end of file
+        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
\ No newline at end of file
diff --git a/src/styles/hubl-framework/buttons/_index.scss b/src/styles/hubl-framework/buttons/_index.scss
index 3c03ef9..42c1f1a 100644
--- a/src/styles/hubl-framework/buttons/_index.scss
+++ b/src/styles/hubl-framework/buttons/_index.scss
@@ -19,6 +19,7 @@ a {
   &.button {
     padding: 7.5px 20px;
     border-radius: 16.5px;
+    text-decoration: none;
 
     &.rounded {
       border-radius: 50%;
diff --git a/src/styles/hubl-framework/icons/simple-line-icons.scss b/src/styles/hubl-framework/icons/simple-line-icons.scss
index 651b237..dee247e 100644
--- a/src/styles/hubl-framework/icons/simple-line-icons.scss
+++ b/src/styles/hubl-framework/icons/simple-line-icons.scss
@@ -32,7 +32,6 @@
   display: inline-block;
   text-decoration: inherit;
   width: 1em;
-  margin-right: 0.2em;
   text-align: center;
   /* opacity: .8; */
 
diff --git a/src/styles/hubl-framework/segments/positions.scss b/src/styles/hubl-framework/segments/positions.scss
index 385f290..acbdbdc 100644
--- a/src/styles/hubl-framework/segments/positions.scss
+++ b/src/styles/hubl-framework/segments/positions.scss
@@ -10,4 +10,7 @@
   &.float-right {
     float: right;
   }
+  &.center {
+    margin: 0 auto;
+  }
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 6b6673d..5d776f2 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -5,8 +5,17 @@
 
 
 :root {
+  box-sizing: border-box;
   color: #636363;
+  font-family: Open Sans, sans-serif;
   font-size: 14px;
 }
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
 @import 'hubl-framework/_index';
 @import 'hubl-app/_index';