Merge pull request #64 from sgmap/landing

New landing page
This commit is contained in:
gregoirenovel 2017-04-20 13:59:49 +02:00 committed by GitHub
commit 236dc15507
43 changed files with 614 additions and 147 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.6 KiB

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="53" width="318"><g font-size="50" fill="#373c42"><path d="M10.4 37.632c2.496 2.208 5.044 3.36 8.528 3.36 7.02 0 13.208-5.568 13.208-13.392 0-7.968-5.928-13.44-13.052-13.44-3.328 0-6.188 1.152-8.684 3.456V4.992H3.484V40.32H10.4v-2.688zm7.28-17.616c4.576 0 7.488 3.36 7.488 7.536 0 4.368-3.172 7.584-7.488 7.584-4.264 0-7.592-3.024-7.592-7.632 0-4.464 3.172-7.488 7.592-7.488zm40.204 12.816c-1.924 1.728-3.9 2.496-6.864 2.496-3.952 0-7.072-2.112-7.748-5.904h22.256c0-.576.052-.864.052-1.44 0-8.064-5.928-13.824-14.664-13.824-8.892 0-14.352 6.432-14.352 13.392 0 7.488 5.668 13.44 14.456 13.44 5.824 0 9.724-1.728 12.688-5.616l-5.824-2.544zm-14.3-8.448c1.352-3.216 4.004-4.8 7.436-4.8 3.692 0 6.656 1.824 7.592 4.8H43.584zm28.27-9.552H68.32v5.472h3.535V40.32h6.916V20.304h4.11v-5.472h-4.11V5.424h-6.91v9.408zM107.1 40.32h6.916V14.832H107.1v2.784c-2.496-2.304-5.356-3.456-8.684-3.456-7.176 0-13 5.472-13 13.44 0 7.824 6.136 13.392 13.156 13.392 3.484 0 6.084-1.152 8.528-3.36v2.688zm-7.28-20.304c4.368 0 7.592 3.024 7.592 7.488 0 4.656-3.328 7.632-7.592 7.632-4.316 0-7.436-3.216-7.436-7.584 0-4.176 2.86-7.536 7.436-7.536zm24.968 13.632c-2.184 0-4.004 1.584-4.004 3.648 0 2.016 1.82 3.696 4.004 3.696 2.236 0 3.952-1.68 3.952-3.696s-1.768-3.648-3.952-3.648zm38.08-18.816h-6.917v2.784c-2.6-2.256-5.3-3.456-8.73-3.456-7.02 0-12.89 5.184-12.89 13.056 0 7.632 5.83 13.104 13.26 13.104 3.59 0 6.09-1.104 8.37-3.168 0 2.4-.05 4.128-1.71 5.568-1.25 1.056-3.33 1.68-5.87 1.68-2.91 0-4.99-.672-6.4-2.208h-7.64c1.87 5.328 6.71 8.064 14.3 8.064 4.21 0 7.54-.912 10.04-2.832 3.17-2.496 4.21-5.808 4.21-10.752v-21.84zm-14.093 5.184c4.576 0 7.54 3.168 7.54 7.296 0 4.32-3.172 7.152-7.436 7.152-4.32 0-7.6-2.976-7.6-7.2 0-3.936 2.91-7.248 7.49-7.248zm34.068-5.856c-7.54 0-14.3 5.712-14.3 13.44 0 7.488 6.344 13.392 14.352 13.392 8.424 0 14.612-6.048 14.612-13.44 0-7.536-6.604-13.392-14.664-13.392zm.104 6.048c4.524 0 7.592 3.072 7.592 7.392 0 4.464-3.33 7.344-7.6 7.344-4.47 0-7.44-3.072-7.44-7.392 0-4.224 3.12-7.344 7.43-7.344zm20.16 6.288c0 2.112-.105 3.312.26 5.376 1.09 5.952 5.2 9.072 11.855 9.072 3.848 0 6.708-.96 8.892-3.216 2.912-2.976 3.224-6.432 3.224-11.136v-11.76h-6.916v13.584c0 4.32-1.508 6.672-5.2 6.672-3.64 0-5.2-2.4-5.2-6.96V14.832h-6.916v11.664zm40.07 13.824h4.47L259.4 14.832h-7.02l-6.968 15.024-6.968-15.024h-7.072l11.804 25.488zM264.856 35.6q1.228 0 2.057.79.857.766.857 1.873 0 1.108-.857 1.9-.857.763-2.057.763t-2.057-.764q-.83-.79-.83-1.9 0-1.106.83-1.87.85-.792 2.05-.792zm27.108-18.51l-.515 1.74h-4.17l-3.15 11.523q-2.09 7.62-4.2 11.786-3 5.88-6.46 8.12-2.63 1.71-5.26 1.71-1.72 0-2.92-.95-.89-.66-.89-1.72 0-.85.74-1.48.71-.61 1.77-.61.77 0 1.31.45.51.45.51 1.03 0 .58-.6 1.08-.46.37-.46.55 0 .23.2.37.255.18.8.18 1.226 0 2.6-.72 1.34-.71 2.4-2.14 1.054-1.4 1.996-4.06.4-1.11 2.146-7.31l4.97-17.85h-4.97l.4-1.74q2.37 0 3.315-.29.942-.314 1.713-1.16.8-.87 2.056-3.214 1.69-3.16 3.23-4.9 2.11-2.345 4.424-3.506 2.343-1.18 4.4-1.18 2.17 0 3.485 1.027 1.32 1.006 1.32 2.19 0 .926-.658 1.558-.658.63-1.687.63-.89 0-1.46-.47-.54-.475-.54-1.134 0-.42.37-1.03.37-.63.37-.84 0-.37-.26-.553-.37-.266-1.086-.266-1.8 0-3.23 1.058-1.913 1.4-3.43 4.38-.77 1.557-2.824 7.727h4.2z"/><path d="M293.906 17.934l9.855-1.476-4.11 12.814q5-7.884 9.09-11.02 2.32-1.794 3.77-1.794.95 0 1.49.527.55.5.55 1.477 0 1.74-.97 3.322-.68 1.186-1.97 1.186-.65 0-1.14-.395-.45-.396-.57-1.213-.06-.5-.26-.66-.22-.21-.54-.21-.48 0-.91.21-.74.37-2.25 2.057-2.37 2.58-5.14 6.69-1.19 1.74-2.05 3.93-1.2 3-1.37 3.61l-.912 3.32h-4.37l5.28-16.38q.915-2.85.915-4.06 0-.48-.43-.79-.57-.42-1.51-.42-.6 0-2.2.23l-.2-.98z"/></g></svg>

After

Width:  |  Height:  |  Size: 3.6 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 36 KiB

View file

@ -0,0 +1 @@
<svg width="120" height="38" viewBox="0 0 120 38" xmlns="http://www.w3.org/2000/svg"><title>C03A1FFC-B3DD-48D2-8111-A47EEA63E68F</title><g fill="none" fill-rule="evenodd"><path d="M79.856 28V13.456h-5.568v-2.544h14.28v2.544h-5.592V28h-3.12zm10.848-17.088h7.416c1.84 0 3.272.444 4.296 1.332 1.024.888 1.536 2.1 1.536 3.636s-.516 2.752-1.548 3.648c-1.032.896-2.46 1.344-4.284 1.344H93.8V28h-3.096V10.912zm7.056 7.56c1.072 0 1.884-.22 2.436-.66.552-.44.828-1.076.828-1.908 0-.848-.272-1.492-.816-1.932-.544-.44-1.36-.66-2.448-.66H93.8v5.16h3.96zm11.028 9.216c-1.144-.352-2.116-.856-2.916-1.512l1.056-2.256a9.004 9.004 0 0 0 2.604 1.38c.904.296 1.892.444 2.964.444 1.184 0 2.1-.208 2.748-.624.648-.416.972-1 .972-1.752 0-.64-.3-1.132-.9-1.476-.6-.344-1.588-.668-2.964-.972-2.144-.464-3.704-1.064-4.68-1.8-.976-.736-1.464-1.808-1.464-3.216 0-1.008.272-1.904.816-2.688.544-.784 1.316-1.4 2.316-1.848 1-.448 2.156-.672 3.468-.672 1.2 0 2.34.18 3.42.54 1.08.36 1.964.86 2.652 1.5l-1.032 2.256c-1.52-1.216-3.2-1.824-5.04-1.824-1.104 0-1.976.228-2.616.684-.64.456-.96 1.076-.96 1.86 0 .672.284 1.184.852 1.536.568.352 1.54.68 2.916.984 1.424.336 2.584.7 3.48 1.092.896.392 1.584.896 2.064 1.512s.72 1.388.72 2.316c0 1.024-.272 1.916-.816 2.676-.544.76-1.328 1.348-2.352 1.764-1.024.416-2.232.624-3.624.624-1.312 0-2.54-.176-3.684-.528z" fill="#4393F3"/><g stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M24.81 35.032a12.06 12.06 0 0 0 1.597-.658 16.934 16.934 0 0 0 2.885-1.735c6.716-4.68 14.029-13.692 14.029-13.692l-.28-.028S31.888 4.968 23.888 2.852v.012c-2-.56-3.177-.864-5.05-.864C9.455 2 2 9.612 2 19s7.686 17 17.072 17c1.984 0 3.967-.341 5.738-.968z" stroke="#4393F3"/><path d="M42.268 35.032a12.06 12.06 0 0 1-1.597-.658 16.934 16.934 0 0 1-2.885-1.735c-6.716-4.68-14.03-13.692-14.03-13.692l.13-.028S34.888 4.968 42.888 2.852v.012c2-.56 3.328-.864 5.2-.864 9.384 0 16.914 7.612 16.914 17S57.355 36 47.97 36c-1.985 0-3.93-.341-5.7-.968z" stroke="#FF5D60"/></g><path d="M0 0h122v38H0z"/></g></svg>

After

Width:  |  Height:  |  Size: 2 KiB

View file

@ -0,0 +1 @@
<svg width="96" height="92" viewBox="0 0 96 92" xmlns="http://www.w3.org/2000/svg"><title>08D2E231-4C84-4B79-AC9D-982A43B5F62D</title><g fill="none" fill-rule="evenodd"><path d="M0-2h96v96H0z"/><path d="M35 85.679c3.208 3.278 7.675 5.32 12.624 5.32 4.95 0 9.417-2.043 12.625-5.321-.922-3.106-3.123-6.105-8.248-6.105 0 0-1.634 1.592-4.377 1.592-2.744 0-4.376-1.592-4.376-1.592-5.125 0-7.326 2.999-8.248 6.106zM47.624 74.63c3.783 0 6.854-3.05 6.854-6.811 0-3.768-3.07-6.82-6.854-6.82-3.782 0-6.854 3.052-6.854 6.82 0 3.76 3.073 6.812 6.854 6.812zM1 42.679c3.208 3.278 7.675 5.32 12.625 5.32 4.949 0 9.417-2.043 12.625-5.321-.922-3.106-3.124-6.105-8.249-6.105 0 0-1.634 1.592-4.376 1.592-2.745 0-4.376-1.592-4.376-1.592-5.126 0-7.327 2.999-8.249 6.106zM13.624 31.63c3.783 0 6.854-3.05 6.854-6.811 0-3.768-3.07-6.82-6.854-6.82-3.783 0-6.854 3.052-6.854 6.82 0 3.76 3.074 6.812 6.854 6.812zM69 42.679c3.207 3.278 7.675 5.32 12.624 5.32 4.95 0 9.418-2.043 12.626-5.321-.922-3.106-3.124-6.105-8.249-6.105 0 0-1.635 1.592-4.377 1.592-2.743 0-4.375-1.592-4.375-1.592-5.126 0-7.328 2.999-8.25 6.106zM81.624 31.63c3.784 0 6.855-3.05 6.855-6.811 0-3.768-3.072-6.82-6.855-6.82-3.782 0-6.853 3.052-6.853 6.82 0 3.76 3.073 6.812 6.853 6.812zm-4.089-18.51C69.795 5.622 59.253 1 47.625 1s-22.17 4.622-29.91 12.12m50.143 68.825c10.966-5.859 19.089-16.33 21.788-28.825m-84.043 0c2.736 12.67 11.055 23.255 22.255 29.064" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -0,0 +1 @@
<svg width="96" height="80" viewBox="0 0 96 80" xmlns="http://www.w3.org/2000/svg"><title>BB9A4BB9-1A5D-4E79-92B9-D2AF8B16FCF3</title><g fill="none" fill-rule="evenodd"><path d="M0-8h96v96H0z"/><path d="M17 17h63" stroke="#F8F8F8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M22.423 13.029a1.5 1.5 0 1 1-3.001-.001 1.5 1.5 0 0 1 3 0m5.001.001a1.5 1.5 0 1 1-3.001-.001 1.5 1.5 0 0 1 3 0m5.001.001a1.5 1.5 0 1 1-3.001-.001 1.5 1.5 0 0 1 3 0" fill="#FFF"/><path d="M69 36H29m40 8H29m23-16H29m51 23V12c0-1.657-1.843-3-3.5-3h-57c-1.657 0-2.5 1.343-2.5 3v39" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M95 62.023a3.918 3.918 0 0 1-3.912 3.923H4.908A3.914 3.914 0 0 1 1 62.023v-56.6A3.914 3.914 0 0 1 4.908 1.5h86.18A3.918 3.918 0 0 1 95 5.423v56.6zM66.998 78.5c-5.837-1.744-10.642-2.479-11.383-8.78v-3.774H38.08v3.386c-.582 6.664-5.468 7.388-11.423 9.168h40.341zM2 51h93" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>

After

Width:  |  Height:  |  Size: 1 KiB

View file

@ -0,0 +1 @@
<svg width="77" height="95" viewBox="0 0 77 95" xmlns="http://www.w3.org/2000/svg"><title>48989501-DD47-4082-8A9E-1AFAB7A24CFE</title><g fill="none" fill-rule="evenodd"><path d="M-10-1h96v96h-96z"/><path d="M65.917 16a4.917 4.917 0 1 1-9.834 0 4.917 4.917 0 0 1 9.834 0z" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M74.74 13.84h-3.718a10.153 10.153 0 0 0-1.41-3.395l2.631-2.631a1.26 1.26 0 0 0 0-1.784l-1.272-1.272a1.264 1.264 0 0 0-1.785 0l-2.63 2.632a10.202 10.202 0 0 0-3.395-1.412V2.262C63.161 1.566 62.596 1 61.9 1h-1.798c-.696 0-1.26.566-1.26 1.262v3.716a10.216 10.216 0 0 0-3.396 1.412l-2.632-2.632a1.261 1.261 0 0 0-1.783 0L49.76 6.03a1.26 1.26 0 0 0 0 1.784l2.63 2.63a10.196 10.196 0 0 0-1.412 3.396h-3.717a1.26 1.26 0 0 0-1.26 1.262V16.9a1.26 1.26 0 0 0 1.26 1.26h3.717c.265 1.23.75 2.375 1.411 3.396l-2.63 2.632a1.258 1.258 0 0 0 0 1.782l1.271 1.274a1.261 1.261 0 0 0 1.783 0l2.632-2.631a10.256 10.256 0 0 0 3.395 1.41v3.716c0 .696.565 1.263 1.261 1.263H61.9c.697 0 1.262-.567 1.262-1.263v-3.715a10.242 10.242 0 0 0 3.394-1.411l2.631 2.63a1.264 1.264 0 0 0 1.785 0l1.272-1.273a1.258 1.258 0 0 0 0-1.782l-2.63-2.632a10.153 10.153 0 0 0 1.41-3.395h3.717A1.26 1.26 0 0 0 76 16.9v-1.798a1.26 1.26 0 0 0-1.26-1.262z" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M45 2H3.727A2.727 2.727 0 0 0 1 4.726v86.545A2.727 2.727 0 0 0 3.727 94h69.546A2.727 2.727 0 0 0 76 91.272V31M1 12h39" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.256 7.028a2 2 0 1 1-4.002-.001 2 2 0 0 1 4.002.001m6 0a2 2 0 1 1-4.002-.001 2 2 0 0 1 4.002.001m6 0a2 2 0 1 1-4.002-.001 2 2 0 0 1 4.002.001" fill="#FFF"/><path d="M66 39H11m55 9H11m55 8H11m55 9H11m31-35H11m31 44H11" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.7 KiB

View file

@ -0,0 +1 @@
<svg width="39" height="31" viewBox="0 0 39 31" xmlns="http://www.w3.org/2000/svg"><title>Slice</title><path d="M14.832 15.96v14.432H0v-10.13c0-3.886.672-7.471 2.016-10.756C3.36 6.222 5.616 3.053 8.784 0l5.472 4.163C10.512 8.05 8.4 11.981 7.92 15.96h6.912zm24.192 0v14.432H24.192v-10.13c0-3.886.672-7.471 2.016-10.756 1.344-3.284 3.6-6.453 6.768-9.506l5.472 4.163c-3.744 3.886-5.856 7.818-6.336 11.796h6.912z" fill="#4393F3" fill-rule="nonzero"/></svg>

After

Width:  |  Height:  |  Size: 452 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

View file

@ -0,0 +1,5 @@
$blue: #4393F3;
$light-blue: rgba(61, 149, 236, 0.8);
$black: #333333;
$grey: #999999;
$light-grey: #F8F8F8;

View file

@ -1,5 +1,7 @@
// colors
$light-blue: #F2F6FA;
// Bootstrap variables
// Bootstrap constants
$font-size-base: 16px;
$page-width: 1040px;

View file

@ -0,0 +1,9 @@
@mixin horizontal-padding($value) {
padding-left: $value;
padding-right: $value;
}
@mixin vertical-padding($value) {
padding-top: $value;
padding-bottom: $value;
}

View file

@ -0,0 +1,14 @@
%horizontal-list {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 0px;
}
%horizontal-list-item {
display: inline-block;
&:last-of-type {
margin-right: 0;
}
}

View file

@ -1,4 +1,4 @@
@import "variables";
@import "constants";
.turbolinks-progress-bar {
background-color: $light-blue;

View file

@ -0,0 +1,6 @@
@import "colors";
%new-type {
font-family: "Muli";
color: $black;
}

View file

@ -22,7 +22,7 @@
// = require select2
// = require select2-bootstrap
@import "variables";
@import "constants";
@import "bootstrap-sprockets";
@import "bootstrap";

View file

@ -1,4 +1,4 @@
@import "variables";
@import "constants";
.default-data-block {
font-family: Arial;

View file

@ -0,0 +1,13 @@
@font-face {
font-family: "Muli";
src: asset-url("Muli-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Muli";
src: asset-url("Muli-Bold.woff") format("woff");
font-weight: bold;
font-style: normal;
}

View file

@ -0,0 +1,53 @@
@import "constants";
@import "colors";
@import "mixins";
@import "typography";
// FIXME: Rename when the header is generalized
.new-header {
@extend %new-type;
height: 72px;
background-color: #FFFFFF;
// FIXME: Delete when the header is generalized
margin-top: -60px;
}
.header-inner-content {
width: $page-width;
margin: 0 auto;
}
.header-logo {
margin-top: 17px;
}
$header-login-button-height: 36px;
$header-login-button-border-size: 1px;
.header-login-button {
@include horizontal-padding(16px);
display: inline-block;
height: $header-login-button-height;
line-height: $header-login-button-height - (2 * $header-login-button-border-size);
border-radius: $header-login-button-height;
border: $header-login-button-border-size solid $blue;
color: $blue;
font-size: 14px;
margin-top: 18px;
&:hover {
color: #FFFFFF;
text-decoration: none;
background-color: $light-blue;
}
&:focus {
color: $blue;
text-decoration: none;
}
&:hover:focus {
color: #FFFFFF;
}
}

View file

@ -1,58 +1,238 @@
#logo-tps {
width: 200px;
@import "constants";
@import "colors";
@import "mixins";
@import "placeholders";
@import "typography";
.landing {
@extend %new-type;
background-color: #FFFFFF;
}
#landing {
background-image: image-url("landing_background.png");
background-attachment: fixed;
background-size: 130% auto;
background-position: top center;
background-repeat: no-repeat;
.landing-panel {
@include vertical-padding(60px);
}
h5 {
color: #808080;
}
.landing-panel-inner-content {
width: $page-width;
margin: 0 auto;
}
.logos {
width: 150px;
}
.hero-tagline {
width: 500px;
font-size: 30px;
margin-bottom: 0px;
}
#title {
padding-bottom: 2%;
padding-top: 1%;
.hero-tagline-em {
color: $blue;
font-size: 36px;
font-style: normal;
font-weight: bold;
}
.hero-text {
width: 500px;
}
.hero-illustration {
width: 500px;
}
.hero-button {
@include horizontal-padding(30px);
display: inline-block;
height: 60px;
line-height: 60px;
border-radius: 60px;
background-color: $blue;
color: #FFFFFF;
font-size: 24px;
margin-top: 30px;
&:hover {
color: #FFFFFF;
text-shadow: 0px 0px 10px rgb(0, 0, 0);
text-decoration: none;
background-color: $light-blue;
}
h2 {
font-size: 35px;
}
.btn {
text-shadow: none;
}
&:focus {
color: #FFFFFF;
text-decoration: none;
}
}
.background-tps {
background-color: #668AEA;
.landing-panel-title {
font-size: 30px;
font-weight: normal;
text-align: center;
margin-bottom: 40px;
margin-top: 0;
}
.features-panel {
background-color: $blue;
}
.features-panel-title {
color: #FFFFFF;
}
#landing-body {
.split-hr-left {
margin-left: auto;
margin-right: auto;
.features {
@extend %horizontal-list;
}
margin-top: 40px;
margin-bottom: 20px;
$feature-width: 320px;
$features-count: 3;
border-color: #808080;
width: 40%;
}
.feature {
@extend %horizontal-list-item;
width: $feature-width;
margin-right: calc((#{$page-width} - (#{$feature-width} * #{$features-count})) / (#{$features-count} - 1));
}
#etapes,
#request-access {
margin-top: 20px;
margin-bottom: 20px;
.feature-text {
text-align: center;
color: #FFFFFF;
font-size: 20px;
}
.feature-text-em {
font-weight: bold;
font-style: normal;
}
.feature-image {
display: block;
margin: 0 auto;
margin-bottom: 24px;
}
.quotes {
@extend %horizontal-list;
}
$quote-width: 500px;
$quote-count: 2;
.quote {
@extend %horizontal-list-item;
width: $quote-width;
margin-right: calc((#{$page-width} - (#{$quote-width} * #{$quote-count}))/ (#{$quote-count} - 1));
background-color: #FFFFFF;
box-shadow: 0 4px 16px 0 rgba(153, 153, 153, 0.2);
padding: 24px;
}
.quote-quotation-mark {
margin-top: 12px;
}
.quote-content {
font-size: 18px;
width: 388px;
margin-bottom: 24px;
}
.quote-author {
font-size: 14px;
margin-left: 64px;
}
.quote-author-name {
font-weight: bold;
}
.numbers-panel {
background-color: $light-grey;
}
.numbers {
@extend %horizontal-list;
}
$number-width: 320px;
$number-count: 3;
.number {
@extend %horizontal-list-item;
width: $number-width;
margin-right: calc((#{$page-width} - (#{$number-width} * #{$number-count}))/ (#{$number-count} - 1));
text-align: center;
}
.number-value {
color: $blue;
font-weight: bold;
font-size: 36px;
}
.number-label {
font-weight: bold;
font-size: 20px;
}
.users {
@extend %horizontal-list;
}
$image-width: 170px;
$images-total-width: $image-width * 5;
$images-count: 5;
.user {
@extend %horizontal-list-item;
margin-right: calc((#{$page-width} - (#{$images-total-width}))/ (#{$images-count} - 1));
&:hover {
opacity: 0.6;
}
}
.user-image {
width: $image-width;
}
.cta-panel {
background-color: $blue;
color: #FFFFFF;
}
.cta-panel-title {
font-size: 24px;
font-weight: bold;
margin-top: 0;
}
.cta-panel-explanation {
font-size: 24px;
margin-bottom: 0;
}
$cta-panel-button-height: 60px;
$cta-panel-button-border-size: 2px;
.cta-panel-button {
@include horizontal-padding(30px);
display: inline-block;
height: $cta-panel-button-height;
line-height: $cta-panel-button-height - (2 * $cta-panel-button-border-size);
border-radius: $cta-panel-button-height;
border: $cta-panel-button-border-size solid #FFFFFF;
color: #FFFFFF;
font-size: 24px;
margin-top: 5px;
&:hover {
color: #FFFFFF;
text-decoration: none;
background-color: rgba(255, 255, 255, 0.2);
}
&:focus {
color: #FFFFFF;
text-decoration: none;
}
}

View file

@ -1,4 +1,4 @@
@import "variables";
@import "constants";
#header {
top: 0;

View file

@ -0,0 +1,69 @@
@import "constants";
@import "mixins";
@import "placeholders";
@import "typography";
.footer {
@extend %new-type;
@include vertical-padding(72px);
background-color: $light-grey;
}
.footer-inner-content {
width: $page-width;
margin: 0 auto;
}
.footer-columns {
@extend %horizontal-list;
}
$footer-column-width: 320px;
$footer-column-count: 3;
.footer-column {
@extend %horizontal-list-item;
width: $footer-column-width;
margin-right: calc((#{$page-width} - (#{$footer-column-width} * #{$footer-column-count})) / (#{$footer-column-count} - 1));
font-size: 14px;
vertical-align: top;
}
.footer-logos,
.footer-links {
list-style-type: none;
padding: 0;
margin: 0;
}
.footer-link {
margin-bottom: 14px;
&:last-of-type {
margin-bottom: 0;
}
}
.footer-logo:hover {
opacity: 0.8;
}
.footer-logo-rf {
width: 75px;
margin-bottom: 14px;
}
.footer-logo-beta-gouv-fr {
width: 190px;
}
.footer-link a {
color: $black;
text-decoration: none;
&:hover,
&:focus {
color: $blue;
text-decoration: none;
}
}

View file

@ -1,4 +1,4 @@
@import "variables";
@import "constants";
#users-index,
#admins-index {

View file

@ -39,6 +39,6 @@ class RootController < ApplicationController
@demo_environment_host = "https://tps-dev.apientreprise.fr" unless Rails.env.development?
render 'landing'
render 'landing', :layout => 'new_application'
end
end

View file

@ -0,0 +1,35 @@
.footer
.footer-inner-content
%ul.footer-columns
%li.footer-column
%ul.footer-logos
%li
= link_to image_tag("footer/logo-rf.svg",
:class => "footer-logo footer-logo-rf"),
"http://www.gouvernement.fr/"
%li
= link_to image_tag("footer/logo-beta-gouv-fr.svg",
:class => "footer-logo footer-logo-beta-gouv-fr"),
"https://beta.gouv.fr/"
%li.footer-column
%ul.footer-links
%li.footer-link
= link_to "SGMAP", "http://www.modernisation.gouv.fr/le-sgmap", :class => "footer-link"
%li.footer-link
= link_to "Nouveautés", "https://github.com/sgmap/tps/releases", :class => "footer-link"
%li.footer-link
= link_to "Statistiques", stats_path, :class => "footer-link"
%li.footer-link
= link_to "Accès ancienne plateforme de test", "https://tps-dev.apientreprise.fr/", :class => "footer-link"
%li.footer-column
%ul.footer-links
%li.footer-link
= link_to "Contact",
"mailto:#{t('dynamics.contact_email')}",
:class => "footer-link"
%li.footer-link
= link_to "Mentions légales", cgu_path, :class => "footer-link"
%li.footer-link
= link_to "CGU", cgu_path, :class => "footer-link"

View file

@ -0,0 +1,7 @@
.new-header
.header-inner-content
%img{ src: image_url("header/logo-tps.svg"), class: "header-logo pull-left" }
= link_to "Connexion", new_user_session_path, :class => "header-login-button pull-right"
.clear-fix

View file

@ -0,0 +1,41 @@
%html
%head
%meta{ "http-equiv" => "Content-Type", :content => "text/html; charset=UTF-8" }
%meta{ "http-equiv" => "X-UA-Compatible", :content => "IE=edge" }
%meta{ :name => "turbolinks-cache-control", :content => "no-cache" }
= csrf_meta_tags
= action_cable_meta_tag
%title
= t("dynamics.page_title")
= favicon_link_tag(image_url("favicons/16x16.png"), type: "image/png", sizes: "16x16")
= favicon_link_tag(image_url("favicons/32x32.png"), type: "image/png", sizes: "32x32")
= favicon_link_tag(image_url("favicons/96x96.png"), type: "image/png", sizes: "96x96")
= stylesheet_link_tag "application", :media => "all", "data-turbolinks-track" => true
= stylesheet_link_tag "print", :media => "print", "data-turbolinks-track" => true
%body
= render :partial => "layouts/support_navigator_banner"
= render :partial => "layouts/ie_lt_10"
#beta{ class:(Rails.env == "production" ? "" : "beta_staging") }
- if Rails.env == "production"
Beta
- else
Env Test
= render partial: "layouts/new_header"
= render partial: "layouts/flash_messages"
= yield
= render :partial => "layouts/switch_devise_profile_module"
= render :partial => "layouts/notifications_alert"
= render partial: "layouts/new_footer"
= render partial: "layouts/google_analytics"
= javascript_include_tag "application", "data-turbolinks-track" => true
- if Rails.env == "test"
%script{ :type => "text/javascript" }
(typeof jQuery !== "undefined") && (jQuery.fx.off = true);

View file

@ -1,87 +1,134 @@
#landing.max-size
#title
.center
= image_tag 'logos/logo-tps.png', id: 'logo-tps'
%h1.center
TéléProcédure Simplifiée
.landing
.landing-panel.hero-panel
.landing-panel-inner-content
.hero-text.pull-left
%p.hero-tagline
%em.hero-tagline-em Dématérialisez
%br
vos démarches administratives en quelques minutes
.row
.col-md-8.col-md-push-2.center
%h3
Dématérialisez n'importe quelle démarche administrative en quelques minutes,
avec un outil
%strong
gratuit, simple, collaboratif et sûr
= link_to "Demander une démo",
"mailto:#{t("dynamics.contact_email")}?subject=Demande de démo TPS",
:class => "hero-button"
%p.mt-1 Vous êtes intéressés ?
%p= link_to 'Programmer une démo', "mailto:#{t('dynamics.contact_email')}?subject=Demande de démo TPS", target: '_blank', class: 'btn btn-danger btn-lg'
.hero-illustration.pull-right
%img{ :src => image_url("landing/hero/dematerialiser.svg") }
#landing-body.max-size
.row#etapes.center
#create_1.col-lg-3.col-md-3.col-sm-3.col-xs-3
%img{ src: image_url('etapes/create_1.png') }
%br
%h4 Administration
%h3.text-info Je construis ma démarche 100% en ligne
#complet_2.col-lg-3.col-md-3.col-sm-3.col-xs-3
%img{ src: image_url('etapes/complet_2.png') }
%br
%h4 Usager
%h3.text-success Je remplis un dossier de manière simplifiée
#message_3.col-lg-3.col-md-3.col-sm-3.col-xs-3
%img{ src: image_url('etapes/message_3.png') }
%br
%h4 Usager
%h3.text-warning Je dialogue avec mon administration en ligne
#shared_4.col-lg-3.col-md-3.col-sm-3.col-xs-3
%img{ src: image_url('etapes/shared_4.png') }
%br
%h4 Usager et Administrations
%h3.text-danger
J'invite des partenaires à co-construire le dossier
.clearfix
.split-hr-left
.landing-panel.features-panel
.landing-panel-inner-content
%h2.landing-panel-title.features-panel-title Un outil dédié aux organismes publics
.row.demo_account.center
.col-md-4.col-lg-4
%h3.text-primary Acteurs publics
%h4 Créez des démarches en ligne simplifiées et sécurisées.
= link_to 'Démonstration', "#{@demo_environment_host}/administrateurs/sign_in/demo", { class: 'btn btn-lg btn-primary' }
%ul.features
%li.feature
%img.feature-image{ :src => image_url("landing/features/creer.svg") }
%p.feature-text
%em.feature-text-em Créer
%br
des procédures en ligne
%br
en toute simplicité
%li.feature
%img.feature-image{ :src => image_url("landing/features/gerer.svg") }
%p.feature-text
%em.feature-text-em Gérer
%br
les demandes des usagers
%br
sur la plateforme
%li.feature
%img.feature-image{ :src => image_url("landing/features/collaborer.svg") }
%p.feature-text
%em.feature-text-em Collaborer
%br
pour instruire les demandes
%br
à plusieurs
.col-md-4.col-lg-4
%h3.text-warning Agents et services
%h4 Accompagnez et co-traitez les projets avec les usagers.
= link_to 'Démonstration', "#{@demo_environment_host}/gestionnaires/sign_in/demo", { class: 'btn btn-lg btn-warning' }
.landing-panel
.landing-panel-inner-content
%h2.landing-panel-title Ce que les utilisateurs pensent du service
.col-md-4.col-lg-4
%h3.text-success Usagers
%h4 Profitez de démarches simplifiées et déchanges continus avec les services traitants.
= link_to 'Démonstration', "#{@demo_environment_host}/users/sign_in/demo", { class: 'btn btn-lg btn-success' }
%ul.quotes
%li.quote
%img.quote-quotation-mark.pull-left{ :src => image_url("landing/testimonials/quotation-mark.svg") }
%p.quote-content.pull-right
TPS cest surtout lassurance dun dialogue en toute fluidité et en toute transparence entre les porteurs de projet et ladministration. Un service qui garantit une économie de temps et beaucoup moins de manipulations des dossiers.
.clearfix
.split-hr-left
%p.quote-author.pull-left
%span.quote-author-name Nadja Briki
%br
Déléguée de la Préfète du Pas-de-Calais
.clearfix
.center
.row
#utilisateurs.col-xs-12.col-sm-12.col-md-12.col-lg-12
%h4 Ils nous font confiance
%li.quote
%img.quote-quotation-mark.pull-left{ :src => image_url("landing/testimonials/quotation-mark.svg") }
%p.quote-content.pull-right
TPS est un outil de dématérialisation adapté au dépôt de dossiers de demande dinscription au registre des transporteurs routiers en Ile-de-France. Les échanges avec les usagers sont facilités, ce qui permet de réduire les délais dinstructions et de gagner en efficacité.
.clearfix
Conseil Regional Ile de France, Politique de la ville du Pas de Calais (ensemble des administrations et collectivités territoriales concernées), DRIEA Ile de France
%br
Préfecture de la Martinique, DRIEE Ile de France, Ministère de l'Environnement, de l'Energie et de la Mer, MEEM, CCI Normandie, DGE, Assemblée permanente des chambres de métiers et de l'artisanat
%p.quote-author.pull-left
%span.quote-author-name Elodie Le Rhun
%br
Chef de bureau, DRIEA Ile-de-France
.clearfix
%br
.row
#partenaires.col-xs-12.col-sm-12.col-md-12.col-lg-12
%h4 Ils travaillent avec nous
- cache "numbers-panel", :expires_in => 3.hours do
.landing-panel.numbers-panel
.landing-panel-inner-content
%h2.landing-panel-title TPS en chiffres
%ul.numbers
%li.number
.number-value
= number_with_delimiter(Procedure.where(:published => true).count, :locale => :fr)
.number-label<
procédures
%br<>
dématérialisées
%li.number
.number-value
= number_with_delimiter(Dossier.where.not(:state => :draft).count, :locale => :fr)
.number-label<
dossiers
%br<>
déposés
%li.number
.number-value
= "#{number_with_delimiter(50, :locale => :fr)} %"
.number-label<
de réduction
%br<>
des délais de traitement
Insee, Infogreffe, Ministère de la Ville, de la Jeunesse et des Sports, IGN, DGFIP, CGET, France Connect, Open Streetmap, la BAN, api.gouv.fr, Euroquity - BPI, FNTP, Qualibat
.landing-panel.users-panel
.landing-panel-inner-content
%h2.landing-panel-title Ils nous font confiance
.split-hr-left
%ul.users
%li.user
%a{ :href => "http://www.developpement-durable.gouv.fr/", :target => "_blank " }
%img.user-image{ :src => image_url("landing/users/ministere-environnement.jpg") }
%li.user
%a{ :href => "https://www.iledefrance.fr/", :target => "_blank " }
%img.user-image{ :src => image_url("landing/users/region-idf.jpg") }
%li.user
%a{ :href => "http://www.artisanat.fr/", :target => "_blank " }
%img.user-image{ :src => image_url("landing/users/chambres-de-metiers.jpg") }
%li.user
%a{ :href => "http://www.cci.fr/", :target => "_blank " }
%img.user-image{ :src => image_url("landing/users/cci.jpg") }
%li.user
%a{ :href => "http://www.driea.ile-de-france.developpement-durable.gouv.fr/", :target => "_blank " }
%img.user-image{ :src => image_url("landing/users/driea-idf.jpg") }
#request-access.row.center
.col-xs-12.col-sm-12.col-md-12.col-lg-12
%h3 Envie de commencer à créer votre démarche ?
.landing-panel.cta-panel
.landing-panel-inner-content
= link_to "Demander une démo",
"mailto:#{t('dynamics.contact_email')}?subject=Demande de démo TPS",
:class => "cta-panel-button pull-right"
%h1.cta-panel-title.pull-left Commencez à dématerialiser vos démarches
%p.cta-panel-explanation.pull-left Nous vous accompagnons dans la prise en main de loutil
.clearfix
= link_to 'Demander un accès administrateur', 'https://tps.apientreprise.fr/users/dossiers/new?procedure_id=31', { class: 'btn btn-lg background-tps', target: '_blank' }
.split-hr-left

View file

@ -23,6 +23,8 @@ module TPS
config.autoload_paths += %W(#{config.root}/lib #{config.root}/app/validators #{config.root}/app/facades)
config.assets.paths << Rails.root.join('app', 'assets', 'javascript')
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.precompile += %w(.woff)
if Rails.env.production?
URL = "https://tps.apientreprise.fr/"

View file

@ -55,7 +55,7 @@ Rails.application.configure do
# config.logger = ActiveSupport::TaggedLogging.new(SyslogLogger.new)
# Use a different cache store in production.
# config.cache_store = :mem_cache_store
config.cache_store = :memory_store
# Enable serving of images, stylesheets, and JavaScripts from an asset server.
# config.action_controller.asset_host = 'http://assets.example.com'

View file

@ -33,7 +33,7 @@ describe RootController, type: :controller do
subject
end
it { expect(response.body).to have_css('#landing') }
it { expect(response.body).to have_css('.landing') }
end
end
@ -55,31 +55,7 @@ describe RootController, type: :controller do
subject
end
it { expect(response.body).to have_css('#landing') }
end
context 'environment is not development' do
render_views
before do
Rails.env.stub(:development? => false)
subject
end
it { expect(response.body).to have_link('Démonstration', href: "https://tps-dev.apientreprise.fr#{ users_sign_in_demo_path }") }
end
context 'environment is development' do
render_views
before do
Rails.env.stub(:development? => true)
subject
end
it { expect(response.body).to have_link('Démonstration', href: users_sign_in_demo_path) }
it { expect(response.body).to have_css('.landing') }
end

View file

@ -36,7 +36,7 @@ feature 'Administrator connection' do
page.find_by_id('sign-out').find('a.fa-sign-out').click
end
scenario 'admin is redireted to home page' do
expect(page).to have_css('#landing')
expect(page).to have_css('.landing')
end
end
context 'when clicking on profile' do