refactor done, try to give a look a bit more stylish without success huehue

src/Users.purs

 module Users
        (module Users.Types,
-        module Users.Info)
+        module Users.Specs)
        where
 
 import Users.Types
-import Users.Info
+import Users.Specs

src/Users/Info.purs

-module Users.Info
-       (layoutUser
-       )
-       where
-
-import Prelude hiding (div)
-import Users.Types.Lens
-import Users.Types.Types
-
-import Brevets as B
-import Control.Monad.Eff.Console (CONSOLE)
-import DOM (DOM)
-import Data.Either (Either(..))
-import Data.Lens (Lens', Prism', lens, prism)
-import Data.List (fromFoldable)
-import Data.Tuple (Tuple(..))
-import DocView as DV
-import Network.HTTP.Affjax (AJAX)
-import Projects as PS
-import React.DOM (a, div, h3, h5, h6, i, img, li, nav, small, span, table, tbody, td, text, th, thead, tr, ul)
-import React.DOM.Props (_data, _id, aria, className, href, role, scope, src)
-import Tab (tabs)
-import Thermite (PerformAction, Render, Spec, focus, modifyState, simpleSpec)
-

src/Users/Specs.purs

 module Users.Specs
-       (module Users.Specs.Renders)
+       (module Users.Specs.Renders,
+        layoutUser)
        where
 
 import Users.Specs.Renders

src/Users/Specs/Renders.purs

 module Users.Specs.Renders
        where
 
-import React.DOM (div, h3, img, li, span, text, ul)
+import Data.Tuple (Tuple(..))
+import Prelude (($), (<<<), (<>))
+import React (ReactElement)
+import React.DOM (div, h1, h3, h4, img, li, span, text, ul)
 import React.DOM.Props (_id, className, src)
 import Thermite (Render)
 import Users.Types.Types (Action, State)
 
+
+infoRender :: forall props. Tuple String String -> Array ReactElement
+infoRender (Tuple title content) =
+  [
+    span [] [text title],
+    span [className ""] [text content]
+  ]
+
+listElement :: forall props. Array ReactElement -> ReactElement
+listElement = li [className "list-group-item justify-content-between"]
+
+card :: forall props. String -> Array ReactElement -> Array ReactElement
+card title elems =
+  [
+    div [className "card"]
+    [
+      div [className "card-header"]
+      [
+        h4 [] [text title]
+      ],
+      div [className "card-body"]
+      elems
+    ]
+  ]
+
+userInfos :: ReactElement
+userInfos =
+    ul [className "list-group"]
+    [
+      listElement <<< infoRender $ Tuple "Fonction: " "Enseignant chercheur"
+    ,listElement <<< infoRender $ Tuple "Entité, service: " "Mines Saint-Etienne SPIN -PTSI"
+    ,listElement <<< infoRender $ Tuple "Téléphone: " "(+33) 4 77 42 00 70"
+    ,listElement <<< infoRender $ Tuple "Courriel: " "gargantua@rabelais.fr"
+    ,listElement <<< infoRender $ Tuple "Bureau: " "D1/10"
+    ,listElement <<< infoRender $ Tuple "Appelation: " "Maître de conférences (EPA)"
+    ,listElement <<< infoRender $ Tuple "Lieu: " "Saint-Etienne, 158 Cours Fauriel"
+    ]
+
+pbInfos :: ReactElement
+pbInfos =
+  ul [className "list-group"]
+  [
+    listElement <<< infoRender $ Tuple "" "https://www.imt.fr/en/"
+  ,listElement <<< infoRender $ Tuple "" "https://www.imt.fr/en/"
+  ,listElement <<< infoRender $ Tuple "" "https://www.imt.fr/en/"
+  ]
+
 render :: forall props. Render State props Action
 render dispatch _ state _ =
   [
     div [className "container-fluid"]
-    [ div [className "row", _id "user-page-header"]
-      [ div [className "col-md-2"]
-        [ h3 [] [text "User Name"]
-        ]
-      , div [className "col-md-8"] []
-      , div [className "col-md-2"]
-        [ span [] [text ""]
-        ]
-      ]
-    , div [className "row", _id "user-page-info"]
+    [
+      div [className "row", _id "user-page-info"]
       [
-        div [className "col-md-12"]
-        [ div [className "row"]
-          [ div [className "col-md-2"]
-            [ img [src "/images/Gargantextuel-212x300.jpg"] []
-            ]
-          , div [className "col-md-1"] []
-          , div [className "col-md-8"]
-            [
-              ul [className "list-group"]
-              [
-                li [className "list-group-item justify-content-between"]
-                [  span [] [text "Fonction"]
-                , span [className "badge badge-default badge-pill"] [text "Enseignant chercheur"]
-                ]
-              , li [className "list-group-item justify-content-between"]
-                [  span [] [text "Entité, service"]
-                , span [className "badge badge-default badge-pill"] [text "Mines Saint-Etienne SPIN -PTSI"]
-                ]
-
-              , li [className "list-group-item justify-content-between"]
-                [  span [] [text "Téléphone"]
-                , span [className "badge badge-default badge-pill"] [text "(+33) 04 77 42 0070"]
-                ]
-              , li [className "list-group-item justify-content-between"]
-                [  span [] [text "Courriel"]
-                , span [className "badge badge-default badge-pill"] [text "gargantua@rabelais.fr"]
-                ]
-              , li [className "list-group-item justify-content-between"]
-                [  span [] [text "Bureau"]
-                , span [className "badge badge-default badge-pill"] [text "D1/10"]
-                ]
-              , li [className "list-group-item justify-content-between"]
-                [  span [] [text "Apellation"]
-                , span [className "badge badge-default badge-pill"] [text "Maître de conférences (EPA)"]
-                ]
-              , li [className "list-group-item justify-content-between"]
-                [  span [] [text "Lieu"]
-                , span [className "badge badge-default badge-pill"] [text "Saint-Etienne, 158 Cours Fauriel"]
-                ]
-
-              ]
-            ]
-          ]
+        div [className "row"]
+        [
+          div [className "col-md-8"]
+          $ card "Jean HEUDE" [userInfos]
+        ,div [className "col-md-4"]
+         $
+         card "Publications" [pbInfos]
+         <> card "Brevets" [pbInfos]
         ]
       ]
-    , div [className "row",_id "user-page-footer"]
-      [ div [className "col-md-12"]
-        []
-
-      ]
     ]
   ]