From a1e98a8a23a1b2c623d352c4df4c44b9c4d0fc21 Mon Sep 17 00:00:00 2001
From: Adabriand Furtado <adabriand@gmail.com>
Date: Wed, 12 Oct 2016 18:44:12 -0300
Subject: [PATCH] Add the new Home layout

---
 pybossa/themes/default/static/css/theme.css                  | 81 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 pybossa/themes/default/static/img/wl-feature-create-sign.png | Bin 0 -> 3431 bytes
 pybossa/themes/default/static/img/wl-feature-fix-sign.png    | Bin 0 -> 14209 bytes
 pybossa/themes/default/static/img/wl-feature-send-video.png  | Bin 0 -> 5603 bytes
 pybossa/themes/default/templates/home/_pybossa_text.html     | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 138 insertions(+), 1 deletion(-)
 create mode 100644 pybossa/themes/default/static/img/wl-feature-create-sign.png
 create mode 100644 pybossa/themes/default/static/img/wl-feature-fix-sign.png
 create mode 100644 pybossa/themes/default/static/img/wl-feature-send-video.png

diff --git a/pybossa/themes/default/static/css/theme.css b/pybossa/themes/default/static/css/theme.css
index ecce7b7..37db7d2 100644
--- a/pybossa/themes/default/static/css/theme.css
+++ b/pybossa/themes/default/static/css/theme.css
@@ -18,7 +18,7 @@ html {
     min-height: 100%;
 }
 body {
-    margin: 0 0 226px; /* bottom = footer height */
+    margin: 0 0 166px; /* bottom = footer height */
     padding-top: 53px;
     font-family: 'Open Sans', sans-serif;
 }
@@ -369,3 +369,82 @@ h6 small {
 .upload-container .form-actions {
   padding-top: 10px;
 }
+
+/* Home */
+#wl-features {
+    position: relative;
+    background: #ffffff;
+    z-index: 1;
+}
+
+.wl-features-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    overflow: hidden;
+    padding: 0;
+}
+
+.wl-features-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex: 1;
+    padding: 75px 0;
+}
+
+.wl-feature {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    align-items: center;
+    padding: 20px;
+}
+
+.wl-feature .wl-feature-img {
+    margin-bottom: 28px;
+}
+
+.wl-feature .wl-feature-btn {
+    padding: 10px 50px;
+    font-weight: bold;
+    font-size: 18px;
+    border-radius: 6px;
+    text-transform: uppercase;
+    margin-bottom: 28px;
+}
+
+.wl-feature .wl-feature-description {
+    font-size: 14px;
+    line-height: 24px;
+    text-align: center;
+}
+
+.wl-features-wrapper.-green {
+    background: #99f35d;
+}
+
+.wl-features-wrapper.-yellow {
+    background: #f9dd24;
+}
+
+.wl-features-wrapper.-blue {
+    background: #b6cfed;
+}
+
+.wl-features-wrapper .wl-ellipse-wrapper {
+    position: absolute;
+    right: 0px;
+    top: 50%;
+    transform: translate(42px, -42px);
+    width: 85px;
+    height: 85px;
+    border-radius: 50% 50%;
+    background: #ffffff;
+    z-index: 1;
+    text-align: center;
+    font-size: 24px;
+    vertical-align: middle;
+    line-height: 80px;
+}
diff --git a/pybossa/themes/default/static/img/wl-feature-create-sign.png b/pybossa/themes/default/static/img/wl-feature-create-sign.png
new file mode 100644
index 0000000..b29278a
Binary files /dev/null and b/pybossa/themes/default/static/img/wl-feature-create-sign.png differ
diff --git a/pybossa/themes/default/static/img/wl-feature-fix-sign.png b/pybossa/themes/default/static/img/wl-feature-fix-sign.png
new file mode 100644
index 0000000..7e703f5
Binary files /dev/null and b/pybossa/themes/default/static/img/wl-feature-fix-sign.png differ
diff --git a/pybossa/themes/default/static/img/wl-feature-send-video.png b/pybossa/themes/default/static/img/wl-feature-send-video.png
new file mode 100644
index 0000000..891714f
Binary files /dev/null and b/pybossa/themes/default/static/img/wl-feature-send-video.png differ
diff --git a/pybossa/themes/default/templates/home/_pybossa_text.html b/pybossa/themes/default/templates/home/_pybossa_text.html
index e69de29..40aa5bb 100644
--- a/pybossa/themes/default/templates/home/_pybossa_text.html
+++ b/pybossa/themes/default/templates/home/_pybossa_text.html
@@ -0,0 +1,58 @@
+<section id="wl-features">
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-xs-12 wl-features-container">
+                <div class="wl-features-wrapper -green">
+                    <div class="wl-feature">
+                        <div class="wl-feature-img">
+                            <img src="static/img/wl-feature-send-video.png" alt="Ícone de envio de vídeos">
+                        </div>
+                        <a href="project/wikilibras/newtask" class="btn btn-info wl-btn wl-feature-btn">
+                            enviar
+                            video
+                        </a>
+                        <div class="wl-feature-description">
+                            <span>Grave seu sinal e envie para nossa comunidade.</span>
+                        </div>
+                    </div>
+                    <div class="wl-ellipse-wrapper">
+                        <span>ou</span>
+                    </div>
+                </div>
+                <div class="wl-features-wrapper -yellow">
+                    <div class="wl-feature">
+                        <div class="wl-feature-img">
+                            <img src="static/img/wl-feature-create-sign.png" alt="Ícone de criação de sinais">
+                        </div>
+                        <a href="project/wikilibras/newtask" class="btn btn-info wl-btn wl-feature-btn">
+                            criar
+                            sinal
+                        </a>
+                        <div class="wl-feature-description">
+                            <span> Ensine Ícaro, o nosso avatar, a fazer um sinal.
+                            </span>
+                        </div>
+                    </div>
+                    <div class="wl-ellipse-wrapper">
+                        ou
+                    </div>
+                </div>
+                <div class="wl-features-wrapper -blue">
+                    <div class="wl-feature">
+                        <div class="wl-feature-img">
+                            <img src="static/img/wl-feature-fix-sign.png" alt="Ícone de correção de sinais">
+                        </div>
+                        <a href="project/corretor_sinais/newtask" class="btn btn-info wl-btn wl-feature-btn">
+                            corrigir
+                            sinal
+                        </a>
+                        <div class="wl-feature-description">
+                            <span>O sinal está incorreto? Colabore corrigindo-o.
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
--
libgit2 0.21.2