New homepage

udata_front/theme/gouvfr/__init__.py

@@ -47,9 +47,10 @@
     nav.Item(_('API'), 'dataservices.list'),
     nav.Item(_('Reuses'), 'reuses.list'),
     nav.Item(_('Organizations'), 'organizations.list'),
-    nav.Item(_('Getting started on data.gouv.fr'), None, items=[
+    nav.Item(_('Getting started on {site}'
+               .format(site=current_app.config.get('SITE_TITLE'))), None, items=[
         nav.Item(
-            _('What is data.gouv.fr?'),
+            _('What is {site}?'.format(site=current_app.config.get('SITE_TITLE'))),
             'gouvfr.show_page',
             args={'slug': 'about/a-propos_data-gouv'}
         ),

udata_front/theme/gouvfr/assets/less/components/borders.less

@@ -60,6 +60,10 @@ You can change this behaviour by using the `filet-currentcolor` class that will
     border-radius: @spacing-xxs;
 }
 
+.rounded-xs {
+    border-radius: @spacing-xs;
+}
+
 .rounded-2 {
     border-radius: 2px;
 }

udata_front/theme/gouvfr/assets/less/components/buttons.less

@@ -76,6 +76,13 @@ each(@colors, {
     }
 });
 
+.fr-btn--white {
+    color: @text-default-grey;
+    --background-action-high-blue-france: @white;
+    --hover: #f6f6f633;
+    --active: #ededed33;
+}
+
 .fr-btn--secondary-white {
     --hover: #f6f6f633;
     --active: #ededed33;

udata_front/theme/gouvfr/assets/less/content/colors.less

@@ -97,6 +97,11 @@ each(@colors, {
     --success-625-425: #18753c;
 }
 
+.bg-grey-125-dark {
+    background-color: #2a2a2a;
+    --hover: var(--grey-200-850);
+}
+
 .bg-contrast-grey {
     background-color: @background-contrast-grey;
 }
@@ -129,6 +134,10 @@ each(@colors, {
     background-color: @background-alt-green-tilleul-verveine;
 }
 
+.border-mention-grey {
+    border-color: @text-mention-grey !important;
+}
+
 .text-disabled-grey {
     color: @text-disabled-grey !important;
 }

udata_front/theme/gouvfr/assets/less/content/typography.less

@@ -32,6 +32,10 @@ h6,
     line-height: 1 !important;
 }
 
+.line-height-xxxl {
+    line-height: @line-height-xxxl !important;
+}
+
 .f-italic {
     font-style: italic;
 }
@@ -40,6 +44,14 @@ h6,
     font-weight: bold;
 }
 
+.font-800 {
+    font-weight: 800 !important;
+}
+
+.font-300 {
+    font-weight: 300 !important;
+}
+
 .sup {
     display: inline-block;
     font-weight: 300;

udata_front/theme/gouvfr/assets/less/font.less

@@ -9,6 +9,16 @@
     font-display: swap;
 }
 
+@font-face {
+    font-weight: 800;
+    font-family: Marianne;
+    font-style: normal;
+    src: url("../fonts/Marianne-ExtraBold.woff2") format("woff2"),
+        url("../fonts/Marianne-ExtraBold.woff") format("woff");
+
+    font-display: swap;
+}
+
 @font-face {
     font-weight: 600;
     font-family: Spectral;

udata_front/theme/gouvfr/assets/less/specific/hero.less

@@ -14,3 +14,62 @@
         padding: @spacing-md 0 !important;
     }
 }
+.hero-background {
+    background-image: radial-gradient(rgba(255, 255, 255, 0.8), rgba(217, 217, 217, 0)), url('../../img/homepage/hero-background.png');
+    background-position: center;
+    background-size: cover;
+}
+@media @dsfr-query-md {
+    .dual-color-background {
+        background: linear-gradient(
+            to right,
+            var(--background-default-grey) 0%,
+            var(--background-default-grey) 50%,
+            var(--background-alt-grey) 50%,
+            var(--background-alt-grey) 100%
+          );
+    }
+
+    .dual-color-background--reversed {
+        background: linear-gradient(
+            to right,
+            var(--background-alt-grey) 0%,
+            var(--background-alt-grey) 50%,
+            var(--background-default-grey) 50%,
+            var(--background-default-grey) 100%
+          );
+    }
+}
+
+.w-4rem {
+    width: 4rem;
+}
+
+.h-4rem {
+    height: 4rem;
+}
+
+.with-svg-responsive svg {
+    width: 100%;
+    height: auto;
+}
+
+.greyscaled {
+    filter: grayscale(1);
+}
+
+.opacity-50 {
+    opacity: 50%;
+}
+
+.opacity-80 {
+    opacity: 80%;
+}
+
+.object-fit-contain {
+    object-fit: contain;
+}
+
+.bg-dark {
+    background-color: #242424;
+}

udata_front/theme/gouvfr/assets/less/variables.less

@@ -108,13 +108,15 @@
 @font-size-lg: 1.25rem;
 @font-size-xl: 1.5rem;
 @font-size-xxl: 2rem;
+@font-size-xxxl: 2.25rem;
 @font-size-hg: 2.5rem; // hg for humongous
 
 @line-height-xxs: 0.9rem;
 @line-height-xs: 1.25rem;
 @line-height-sm: 1.5rem;
+@line-height-xxxl: 3rem;
 
-@font-sizes: xs, sm, base, lg, xl, xxl, hg;
+@font-sizes: xs, sm, base, lg, xl, xxl, xxxl, hg;
 
 @font-weight-light: 300;
 @font-weight-normal: 400;