Merge pull request #1517 from betagouv/landing

Landing
This commit is contained in:
gregoirenovel 2018-03-01 12:18:19 +01:00 committed by GitHub
commit 94688fd971
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 249 additions and 74 deletions

View file

@ -1 +0,0 @@
<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>

Before

Width:  |  Height:  |  Size: 1 KiB

View file

@ -0,0 +1 @@
<svg width="78" height="77" viewBox="0 0 78 77" xmlns="http://www.w3.org/2000/svg"><title>Bubble</title><g fill="none" fill-rule="evenodd"><path d="M1.71 74.123S7.274 57.91 6.97 57.397c-.03-.05-.054-.097-.082-.14A37.27 37.27 0 0 1 1.841 38.5C1.84 17.79 18.628 1 39.335 1c20.712 0 37.5 16.79 37.5 37.5S60.047 76 39.335 76a37.353 37.353 0 0 1-20.765-6.282.213.213 0 0 1 .032.025L1.71 74.123z" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M25.168 38.917a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0M42.882 38.917a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0M60.597 38.917a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0" fill="#FFF"/></g></svg>

After

Width:  |  Height:  |  Size: 678 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 4.9 KiB

View file

@ -0,0 +1 @@
<svg width="94" height="96" viewBox="0 0 94 96" xmlns="http://www.w3.org/2000/svg"><title>usager</title><g fill="none" fill-rule="evenodd"><path d="M17.334 12.334h39" stroke="#0069CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M26.09 7.316a2 2 0 1 1-4.002-.001 2 2 0 0 1 4.002.001M32.09 7.316a2 2 0 1 1-4.002-.001 2 2 0 0 1 4.002.001M38.09 7.316a2 2 0 1 1-4.002-.001 2 2 0 0 1 4.002.001" fill="#0069CC"/><path d="M82.334 39.334h-55M82.334 48.334h-53M82.334 56.334H34.995M82.334 65.334H39.352M54.334 30.334h-27M58.334 74.334H39.021M37.334 94.334h52.773c1.506 0 2.227-2.268 2.227-3.773V31.334M61.334 2.334H20.561c-1.506 0-3.227.174-3.227 1.68v43.32" stroke="#0069CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><g><path d="M62.284 30.249s2.225-6.485 2.104-6.69l-.033-.056A14.908 14.908 0 0 1 62.336 16c0-8.284 6.715-15 14.998-15 8.285 0 15 6.716 15 15 0 8.284-6.715 15-15 15-3.072 0-5.926-.929-8.306-2.513.003.001.013.01.013.01l-6.757 1.752z" fill="#D9E9FD"/><path d="M62.284 30.249s2.225-6.485 2.104-6.69l-.033-.056A14.908 14.908 0 0 1 62.336 16c0-8.284 6.715-15 14.998-15 8.285 0 15 6.716 15 15 0 8.284-6.715 15-15 15-3.072 0-5.926-.929-8.306-2.513.003.001.013.01.013.01l-6.757 1.752z" stroke="#0069CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M71.667 16.167a1.501 1.501 0 1 1-3.002 0 1.501 1.501 0 0 1 3.002 0M78.753 16.167a1.501 1.501 0 1 1-3.002 0 1.501 1.501 0 0 1 3.002 0M85.839 16.167a1.501 1.501 0 1 1-3.002 0 1.501 1.501 0 0 1 3.002 0" fill="#0069CC"/></g><g><path d="M1 87.05c4.277 4.37 10.235 7.094 16.834 7.094s12.555-2.725 16.833-7.096c-1.229-4.143-4.164-8.141-10.997-8.141 0 0-2.18 2.123-5.836 2.123-3.659 0-5.836-2.123-5.836-2.123-6.834 0-9.768 3.998-10.998 8.143" fill="#D9E9FD"/><path d="M1 87.05c4.277 4.37 10.235 7.094 16.834 7.094s12.555-2.725 16.833-7.096c-1.229-4.143-4.164-8.141-10.997-8.141 0 0-2.18 2.123-5.836 2.123-3.659 0-5.836-2.123-5.836-2.123-6.834 0-9.768 3.998-10.998 8.143z" stroke="#0069CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M17.834 72.32c5.044 0 9.138-4.069 9.138-9.083 0-5.025-4.094-9.094-9.138-9.094s-9.138 4.07-9.138 9.094c0 5.014 4.096 9.082 9.138 9.082" fill="#D9E9FD"/><path d="M17.834 72.32c5.044 0 9.138-4.069 9.138-9.083 0-5.025-4.094-9.094-9.138-9.094s-9.138 4.07-9.138 9.094c0 5.014 4.096 9.082 9.138 9.082z" stroke="#0069CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></g></svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

View file

@ -32,13 +32,13 @@ $landing-breakpoint: 1040px;
}
.hero-tagline {
font-size: 30px;
font-size: 40px;
margin-bottom: 0px;
}
.hero-tagline-em {
color: $blue;
font-size: 36px;
font-size: 40px;
font-style: normal;
font-weight: bold;
}
@ -55,31 +55,6 @@ $landing-breakpoint: 1040px;
}
}
.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;
cursor: pointer;
&:hover {
color: #FFFFFF;
text-decoration: none;
background-color: $light-blue;
}
&:focus {
color: #FFFFFF;
text-decoration: none;
}
}
.landing-panel-title {
width: 100%;
font-size: 30px;
@ -110,7 +85,7 @@ $landing-breakpoint: 1040px;
.feature {
@extend %horizontal-list-item;
width: 320px;
width: 260px;
@media (max-width: $landing-breakpoint) {
margin: 15px 20px;
@ -118,9 +93,9 @@ $landing-breakpoint: 1040px;
}
.feature-text {
text-align: center;
color: #FFFFFF;
font-size: 20px;
text-align: center;
}
.feature-text-em {
@ -138,6 +113,7 @@ $landing-breakpoint: 1040px;
@extend %horizontal-list;
width: 100%;
justify-content: space-between;
margin-bottom: 30px;
@media (max-width: $landing-breakpoint) {
justify-content: center;
@ -147,6 +123,7 @@ $landing-breakpoint: 1040px;
.quote {
@extend %horizontal-list-item;
max-width: 500px;
width: 100%;
background-color: #FFFFFF;
box-shadow: 0 4px 16px 0 rgba(153, 153, 153, 0.2);
padding: 24px;
@ -181,6 +158,7 @@ $landing-breakpoint: 1040px;
font-weight: bold;
}
.admins-panel,
.numbers-panel {
background-color: $light-grey;
}
@ -219,8 +197,16 @@ $users-breakpoint: 950px;
justify-content: space-between;
width: 100%;
&:first-of-type {
margin-bottom: 45px;
}
@media (max-width: $users-breakpoint) {
justify-content: space-around;
&:first-of-type {
margin-bottom: 0;
}
}
}
@ -241,11 +227,27 @@ $users-breakpoint: 950px;
width: 170px;
}
.role-image {
height: 180px;
}
.cta-role-title {
font-size: 30px;
font-weight: bold;
margin-top: 13px;
}
.cta-role-explanation {
font-size: 30px;
margin-bottom: 10px;
}
.cta-panel {
background-color: $blue;
color: #FFFFFF;
}
.role-panel-wrapper,
.cta-panel-wrapper {
width: 100%;
display: flex;
@ -253,6 +255,35 @@ $users-breakpoint: 950px;
justify-content: space-between;
}
.role-administrations-panel {
flex-direction: row-reverse;
@media (max-width: $users-breakpoint) {
flex-direction: row;
}
}
.role-panel-70,
.role-panel-30 {
display: inline-block;
}
.role-panel-70 {
width: 70%;
@media (max-width: $users-breakpoint) {
width: 100%;
}
}
.role-panel-30 {
width: 30%;
@media (max-width: $users-breakpoint) {
width: 100%;
}
}
.cta-panel-title {
font-size: 24px;
font-weight: bold;
@ -264,19 +295,45 @@ $users-breakpoint: 950px;
margin-bottom: 10px;
}
.role-panel-title {
font-size: 30px;
font-weight: bold;
}
.role-panel-explanation {
font-size: 24px;
margin-bottom: 10px;
}
.role-administrations-image {
text-align: right;
@media (max-width: $users-breakpoint) {
text-align: center;
margin-bottom: 45px;
}
}
.role-usagers-image {
@media (max-width: $users-breakpoint) {
text-align: center;
margin-bottom: 45px;
}
}
$cta-panel-button-border-size: 2px;
.cta-panel-button {
@include horizontal-padding(30px);
@include vertical-padding(10px);
.cta-panel-button-white {
@include horizontal-padding(40px);
@include vertical-padding(15px);
display: block;
border-radius: 100px;
border: $cta-panel-button-border-size solid #FFFFFF;
color: #FFFFFF;
font-size: 24px;
text-align: center;
cursor: pointer;
margin-top: 20px;
border: $cta-panel-button-border-size solid #FFFFFF;
color: #FFFFFF;
&:hover {
color: #FFFFFF;
@ -289,3 +346,55 @@ $cta-panel-button-border-size: 2px;
text-decoration: none;
}
}
@mixin role-button {
@include horizontal-padding(30px);
height: 50px;
display: inline-block;
border-radius: 100px;
font-size: 20px;
text-align: center;
cursor: pointer;
margin-top: 20px;
line-height: 50px;
}
.role-panel-button-primary {
@include role-button;
background-color: $blue;
color: #FFFFFF;
&:hover {
color: #FFFFFF;
text-decoration: none;
background-color: $light-blue;
}
&:focus {
color: #FFFFFF;
text-decoration: none;
}
}
.role-panel-button-secondary {
@include role-button;
border: $cta-panel-button-border-size solid $blue;
line-height: 50px - 2 * $cta-panel-button-border-size;
color: $blue;
margin-left: 10px;
@media (max-width: $users-breakpoint) {
margin-left: 0px;
}
&:hover {
color: $light-blue;
border: $cta-panel-button-border-size solid $light-blue;
text-decoration: none;
}
&:focus {
color: $light-blue;
text-decoration: none;
}
}

View file

@ -6,47 +6,70 @@
.hero-wrapper
.hero-text
%p.hero-tagline
%em.hero-tagline-em Dématérialisez
%br
vos procédures administratives en quelques minutes
= link_to "Demander une démo",
"mailto:#{t("dynamics.contact_email")}?subject=Demande de démo demarches-simplifiees.fr",
class: "hero-button",
target: "_blank",
onclick: "javascript: ga('send', 'pageview', '/demander-une-demo')"
%em.hero-tagline-em Dématérialiser et simplifier
les démarches administratives
.hero-illustration
%img{ :src => image_url("landing/hero/dematerialiser.svg") }
.landing-panel.features-panel
.container
%h2.landing-panel-title.features-panel-title Un outil dédié aux organismes publics
%ul.features
%li.feature
%img.feature-image{ :src => image_url("landing/features/creer.svg") }
%img.feature-image{ :src => image_url("landing/features/messagerie.svg") }
%p.feature-text
%em.feature-text-em Créer
%em.feature-text-em Dialogue
%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
entre usagers et services plus simple
%li.feature
%img.feature-image{ :src => image_url("landing/features/collaborer.svg") }
%p.feature-text
%em.feature-text-em Collaborer
%em.feature-text-em Collaboration
%br
pour instruire les demandes
pour un traitement des dossiers plus fluide
%li.feature
%img.feature-image{ :src => image_url("landing/features/gerer.svg") }
%p.feature-text
%em.feature-text-em Intégration
%br
à plusieurs
à l'ensemble des services l'État plateforme
.landing-panel
.container
.role-panel-wrapper.role-administrations-panel
.role-panel-30.role-administrations-image
%img.role-image{ :src => image_url("landing/roles/administrations.svg") }
.role-panel-70
%h1.role-panel-title Administrations
%p.role-panel-explanation Créez des formulaires en ligne en quelques minutes et instruisez les demandes des usagers sur une plateforme dédiée
= link_to "Demander un compte",
"mailto:#{t("dynamics.contact_email")}?subject=Demande de démo demarches-simplifiees.fr",
class: "role-panel-button-primary",
target: "_blank",
onclick: "javascript: ga('send', 'pageview', '/demander-une-demo')"
= link_to "Voir la documentation",
"https://tps.gitbooks.io/tps-documentation/content/",
target: "_blank",
class: "role-panel-button-secondary"
.landing-panel.admins-panel
.container
.role-panel-wrapper
.role-panel-30.role-usagers-image
%img.role-image{ :src => image_url("landing/roles/usagers.svg") }
.role-panel-70
%h1.role-panel-title Usagers
%p.role-panel-explanation Déposez des demandes en toute simplicité et retrouvez vos dossiers en ligne
= link_to "Se connecter",
new_user_session_path,
class: "role-panel-button-primary"
.landing-panel
.container
@ -57,7 +80,7 @@
%img.quote-quotation-mark{ :src => image_url("landing/testimonials/quotation-mark.svg") }
.quote-content-wrapper
%p.quote-content
demarches-simplifiees.fr 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é.
Les échanges avec les usagers sont facilités, ce qui permet de réduire les délais dinstructions et de gagner en efficacité.
%p.quote-author
%span.quote-author-name Elodie Le Rhun
@ -68,13 +91,38 @@
%img.quote-quotation-mark{ :src => image_url("landing/testimonials/quotation-mark.svg") }
.quote-content-wrapper
%p.quote-content
demarches-simplifiees.fr 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.
Un service qui garantit une économie de temps et beaucoup moins de manipulations des dossiers.
%p.quote-author
%span.quote-author-name Nadja Briki
%br
Déléguée de la Préfète du Pas-de-Calais
%ul.quotes
%li.quote
%img.quote-quotation-mark{ :src => image_url("landing/testimonials/quotation-mark.svg") }
.quote-content-wrapper
%p.quote-content
Parfait, cela fonctionne très bien ! Merci encore pour votre réactivité.
%p.quote-author
%span.quote-author-name Max A.
%br
à notre service support
%li.quote
%img.quote-quotation-mark{ :src => image_url("landing/testimonials/quotation-mark.svg") }
.quote-content-wrapper
%p.quote-content
★★★★★
%br
Eh les cocos, il y a la télé-procédure
%p.quote-author
%span.quote-author-name Hisham M.
%br
sur le site de la DRIEA
- cache "numbers-panel", :expires_in => 3.hours do
.landing-panel.numbers-panel
.container
@ -82,11 +130,11 @@
%ul.numbers
%li.number
.number-value
= number_with_delimiter(Procedure.publiees_ou_archivees.count, :locale => :fr)
= number_with_delimiter(Procedure.includes(:administrateur).publiees_ou_archivees.map(&:administrateur).uniq.count, :locale => :fr)
.number-label<
procédures
administrations
%br<>
dématérialisées
partenaires
%li.number
.number-value
= number_with_delimiter(Dossier.where.not(:state => :brouillon).count, :locale => :fr)
@ -104,7 +152,7 @@
.landing-panel.users-panel
.container
%h2.landing-panel-title Ils nous font confiance
%h2.landing-panel-title Ils utilisent déjà demarches-simplifiees.fr
%ul.users
%li.user
@ -123,15 +171,31 @@
%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") }
%ul.users
%li.user
%a{ :href => "https://www.debatpublic.fr/", :target => "_blank " }
%img.user-image{ :src => image_url("landing/users/cndp.jpg") }
%li.user
%a{ :href => "https://www.iledefrance.ars.sante.fr/", :target => "_blank " }
%img.user-image{ :src => image_url("landing/users/ars-idf.jpg") }
%li.user
%a{ :href => "http://www.franceagrimer.fr/", :target => "_blank " }
%img.user-image{ :src => image_url("landing/users/france-agrimer.jpg") }
%li.user
%a{ :href => "http://www.rhone.gouv.fr/", :target => "_blank " }
%img.user-image{ :src => image_url("landing/users/prefecture-rhone.jpg") }
%li.user
%a{ :href => "http://www.lillemetropole.fr/", :target => "_blank " }
%img.user-image{ :src => image_url("landing/users/mel.jpg") }
.landing-panel.cta-panel
.container
.cta-panel-wrapper
%div
%h1.cta-panel-title Commencez à dématérialiser vos procédures
%p.cta-panel-explanation Nous vous accompagnons dans la prise en main de loutil
%h1.cta-panel-title Une question, un problème ?
%p.cta-panel-explanation Nous équipe est disponible pour vous renseigner et vous aider
%div
= link_to "Demander une démo",
"mailto:#{t("dynamics.contact_email")}?subject=Demande de démo demarches-simplifiees.fr",
class: "cta-panel-button",
target: "_blank",
onclick: "javascript: ga('send', 'pageview', '/demander-une-demo')"
= link_to "Contactez-nous",
"mailto:#{t("dynamics.contact_email")}?subject=Question à propos de demarches-simplifiees.fr",
class: "cta-panel-button-white",
target: "_blank"