DGNum/demarches-normaliennes
15
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

simplify html and css for landing pages and improve dark mode

Browse source
This commit is contained in:
Lisa Durand 2023-11-13 12:44:02 +01:00
parent f4283392b7
commit a3307553b7
5 changed files with 23 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
app/assets/stylesheets/landing.scss
View file

@ -3,10 +3,6 @@
@import "mixins";
@import "placeholders";
.landing-panel {
@include vertical-padding(60px);
}
$landing-breakpoint: 1040px;
.hero-wrapper {
@ -27,16 +23,6 @@ $landing-breakpoint: 1040px;
}
}
.hero-tagline {
margin-bottom: 0px;
}
.hero-tagline-em {
color: $blue-france-500;
font-style: normal;
font-weight: bold;
}
.hero-illustration {
max-width: 500px;
@ -74,7 +60,6 @@ $landing-breakpoint: 1040px;
}
.feature-text {
color: #FFFFFF;
font-size: 20px;
text-align: center;
}
@ -139,17 +124,7 @@ $landing-breakpoint: 1040px;
font-weight: bold;
}
.usagers-panel,
.numbers-panel,
.cta-panel-2 {
background-color: var(--background-alt-blue-france);
}
.landing {
.more-info {
background-color: #FFFFFF;
}
.numbers {
@extend %horizontal-list;
@ -229,15 +204,6 @@ $users-breakpoint: 950px;
height: 180px;
}
.cta-panel {
background-color: $blue-france-500;
color: #FFFFFF;
.fr-btn {
box-shadow: inset 0 0 0 1px var(--text-inverted-blue-france);
}
}
.role-panel-wrapper {
width: 100%;
display: flex;
@ -274,25 +240,6 @@ $users-breakpoint: 950px;
}
}
.cta-panel-title {
font-size: 24px;
font-weight: bold;
margin-top: 13px;
color: #FFFFFF;
&.grey {
color: $g700;
}
}
.cta-panel-explanation {
font-size: 22px;
margin-bottom: 10px;
&.grey {
color: $g700;
}
}
.role-administrations-image {
text-align: right;

2
app/views/root/_testimonials.html.haml
View file

@ -1,4 +1,4 @@
.landing-panel
.fr-py-6w
.container
%h2.center.fr-mb-4w Ce que les utilisateurs pensent du service

2
app/views/root/_users.html.haml
View file

@ -1,4 +1,4 @@
.landing-panel.users-panel
.fr-py-6w
.container
%h2.center.fr-mb-4w Ils utilisent déjà #{APPLICATION_NAME}

22
app/views/root/administration.html.haml
View file

@ -2,18 +2,18 @@
= render partial: "root/footer"
.landing
.landing-panel.hero-panel
.fr-py-6w
.container
.hero-wrapper
.hero-text
%h1.hero-tagline
%em.hero-tagline-em Dématérialisez et simplifiez
%h1.fr-mb-0
Dématérialisez et simplifiez
vos démarches administratives
.hero-illustration
%img{ :src => image_url("landing/hero/dematerialiser.svg"), alt: "" }
.landing-panel.more-info
.fr-py-6w.fr-background-alt--blue-france
.container
.role-panel-wrapper.role-administrations-panel
.role-panel-70
@ -26,7 +26,7 @@
.role-panel-30.role-more-info-image.fr-mt-2w
%img.role-image{ :src => image_url("landing/roles/usagers.svg"), alt: "" }
.landing-panel.usagers-panel
.fr-py-6w
.container
.role-panel-wrapper.role-administrations-panel
.role-panel-30.role-administrations-image
@ -44,9 +44,7 @@
%br
.landing-panel.features-panel
.fr-py-6w.fr-background-flat--blue-france.fr-text-inverted--blue-france
.container
%ul.features
%li.feature
@ -73,7 +71,7 @@
= render partial: "root/testimonials" if LANDING_TESTIMONIALS_ENABLED
- cache "numbers-panel", :expires_in => 3.hours do
.landing-panel.numbers-panel
.fr-py-6w.fr-background-alt--blue-france
.container
%h2.center.fr-mb-4w #{APPLICATION_NAME} en chiffres
%ul.numbers
@ -113,11 +111,11 @@
- c.with_footer_button do
= link_to("Inscription à notre prochain webinaire", INSCRIPTION_WEBINAIRE_URL, class: "fr-btn", **external_link_attributes)
.landing-panel.cta-panel
.fr-py-6w.fr-background-alt--blue-france
.container
.cta-panel-wrapper
%div
%h1.cta-panel-title Une question, un problème ?
%p.cta-panel-explanation Consultez notre FAQ
%h2 Une question, un problème ?
%p.fr-h5 Consultez notre FAQ
%div
= link_to "Voir la FAQ", t("links.common.faq.url"), class: "fr-btn fr-btn--lg", **external_link_attributes

30
app/views/root/landing.html.haml
View file

@ -3,17 +3,17 @@
- content_for :title, t(".promise")
.landing
.landing-panel.hero-panel
.fr-py-6w
.container
.hero-wrapper
.hero-text
%h1.hero-tagline
%em.hero-tagline-em= t(".promise")
%h1.fr-mb-0
= t(".promise")
.hero-illustration
%img{ :src => image_url("landing/hero/dematerialiser.svg"), alt: '', width: 499, height: 280, loading: 'lazy' }
.landing-panel.usagers-panel
.fr-background-alt--blue-france.fr-py-6w
.container
.role-panel-wrapper
.role-panel-30.role-usagers-image
@ -27,7 +27,7 @@
= link_to t("views.users.sessions.new.connection"), new_user_session_path, class: "fr-btn fr-btn--secondary fr-btn--lg"
- cache [I18n.locale, "numbers-panel"], expires_in: 3.hours do
.landing-panel
.fr-py-6w
.container
%h2.center.fr-mb-4w= t(".our_numbers", name: APPLICATION_NAME)
%ul.numbers
@ -44,28 +44,20 @@
= "#{number_with_delimiter(50)} %"
.number-label.number-label-third= t(".numbers.processing_time")
.landing-panel.cta-panel
.fr-background-alt--blue-france.fr-py-6w
.container
.cta-panel-wrapper
%div
%h2.cta-panel-title= t(".question")
%p.cta-panel-explanation= t(".answer_in_faq")
%h2= t(".question")
%p.fr-h5= t(".answer_in_faq")
%div
= link_to t(".online_help"), t("links.common.faq.url"), class: "fr-btn fr-btn--lg", title: new_tab_suffix(t(".online_help")), **external_link_attributes
-# We temporarily disable the link to the contact page on the homepage
-# %p.cta-panel-explanation Notre équipe est disponible pour vous renseigner et vous aider
-# %div
-# = contact_link "Contactez-nous",
-# tags: 'landing',
-# class: "cta-panel-button-white",
-# target: "_blank",
-# rel: "noopener noreferrer"
.landing-panel
.fr-py-6w
.container
.cta-panel-wrapper
%div
%h2.fr-h4= t(".administration_dematerialize")
%p.cta-panel-explanation.grey= t(".administration_fill_online")
%h2= t(".administration_dematerialize")
%p.fr-h5= t(".administration_fill_online")
%div
= link_to t(".administration_discover"), administration_path, class: "fr-btn fr-btn--lg"