Home : contenus + base structurelle et stylistique

public/stylesheets/cover.css

@@ -26,7 +26,6 @@ a:hover {
 
 html,
 body {
-    height: 100%;
     background-color: #333;
 }
 body {
@@ -37,25 +36,36 @@ body {
 
 /* Extra markup and styles for table-esque vertical and horizontal centering */
 .site-wrapper {
-    display: table;
     width: 100%;
     height: 100%; /* For at least Firefox */
     min-height: 100%;
     -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
     box-shadow: inset 0 0 100px rgba(0,0,0,.5);
 }
-.site-wrapper-inner {
+
-    display: table-cell;
+
-    vertical-align: top;
+section {
+    margin: 0;
+    min-height: 100vh;
+    position: relative;
 }
+
 .cover-container {
-    margin-right: auto;
+    max-width: 940px;
-    margin-left: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    height: 500px;
 }
 
+
+
 /* Padding for spacing */
 .inner {
-    padding: 30px;
+    padding: 15px 30px;
 }
 
 

public/stylesheets/style.css

@@ -1,5 +1,20 @@
 body {
-    background: #333333 url(/img/fond2.png) repeat 0% 0%;
+    background: #333333 url(/img/fond2.png) fixed repeat 0% 0%;
+}
+
+.btn-link {
+    color: #fff;
+}
+
+.glyphicon {
+    margin: 0 10px;
+    font-size: 2em;
+    top: 8px;
+}
+
+.card-body {
+    text-align: left;
+    line-height: 2;
 }
 
 /* Section home */
@@ -11,3 +26,4 @@ body {
     background: transparent url(/img/bowtie.png) no-repeat scroll center center;
     background-size: contain;
 }
+

routes/index.js

@@ -3,7 +3,7 @@ var router = express.Router();
 
 /* GET home page. */
 router.get('/', function(req, res) {
-  res.render('index', { title: 'Accueil' });
+  res.render('index', { title: 'Monnéthic' });
 })
 
 .get("/about", function(req, res) {

views/index.pug

@@ -1,9 +1,83 @@
 extends layout
 
 block content
-  .inner.cover
+    section.inner.cover.home
+        .cover-container
             h1.cover-heading #{title}
             |
-    div.bowtie
+            .bowtie
             |
             p.lead L'éthique, c'est chic
+
+    section.inner.cover.cloud
+        .cover-container
+            h2 Dématérialisez facilement votre monnaie d'échange
+            |
+            .bowtie
+            |
+            p
+                a.btn.btn-link(data-toggle='collapse' href='#collapseCloud' role='button' aria-expanded='false' aria-controls='collapseCloud')
+                    +icon("plus")
+                    | Mais comment ?
+            #collapseCloud.collapse
+                .card.card-body
+                    p
+                        +icon("screenshot")
+                        |  Une application simple pour centraliser tous vos besoins : achat de monnaie d'échange, virements, paiements entre particuliers et professionnels.
+                    p
+                        +icon("phone")
+                        | Utilisable sur smartphones, tablettes et ordinateurs. Compatible avec tous les appareils et OS.
+                    p
+                        +icon("wrench")
+                        | Un paramétrage et déploiement rapide et facile, encadré par une équipe d'experts
+                    p
+                        +icon("user")
+                        | S'adapte à tous vos besoins : monnaie locale, évènements en cashless, devises internes d'entreprises et d'associations...
+
+    section.inner.cover.blockchain
+        .cover-container
+            h2 Bénéficiez de la transparence et de la sécurité de la blockchain
+            |
+            .bowtie
+            |
+            p
+                a.btn.btn-link(data-toggle='collapse' href='#collapseBlockchain' role='button' aria-expanded='false' aria-controls='collapseBlockchain')
+                    +icon("plus")
+                    | La quoi ?
+            #collapseBlockchain.collapse
+                .card.card-body
+                    P
+                        +icon("link")
+                        |  Un système basé sur la blockchain : une technologie d'avenir à la pointe de la sécurité.
+                    p
+                        +icon("eye-open")
+                        | Plus besoin de tiers de confiance : les transactions sont vérifiées par l'intégralité du réseau en toute transparence.
+                    p
+                        +icon("lock")
+                        | L'anonymat garanti pour chaque participant, via des méthodes cryptographiques innovantes.
+
+    section.inner.cover.decentralise
+        .cover-container
+            h2 Bâtissez le système de paiement de demain : décentralisé, citoyen et participatif
+            |
+            .bowtie
+            |
+            p
+                a.btn.btn-link(data-toggle='collapse' href='#collapseDecentralise' role='button' aria-expanded='false' aria-controls='collapseDecentralise')
+                    +icon("plus")
+                    | Et l'avenir, ça ressemble à quoi ?
+            #collapseDecentralise.collapse
+                .card.card-body
+                    P
+                        +icon("user")
+                        |  Un réseau de paiement construit par ses membres, auquel chacun peut participer à la hauteur de ses ambitions
+                    p
+                        +icon("cloud")
+                        | Inutile de se reposer entièrement sur une seule entité et des machines coûteuses : la charge est répartie entre tous
+                    p
+                        +icon("leaf")
+                        | Un système économique et écologique, aux processus de sécurité peu gourmands en énergie
+                    p
+                        +icon("piggy-bank")
+                        | Pas de cryptomonnaie ou de spéculation : restez maîtres de votre monnaie
+

views/layout.pug

@@ -8,7 +8,7 @@ append styles
 block body
     .site-wrapper
         .site-wrapper-inner
-            .cover-container
+                // Barre supérieure
                 .masthead.clearfix
                     .inner
                         h3.masthead-brand Monnéthic
@@ -18,8 +18,10 @@ block body
                                     a(href="#home") Accueil
                                 li
                                     a(href="#contact") Contact
+                // ici le contenu
                 block content
 
+                //footer
                 .mastfoot
                     .inner
-                        p Cover template for <a href="http://getbootstrap.com">Bootstrap </a>, by <a href="https://twitter.com/mdo">@mdo</a>.
+                        p © Monnéthic 2018