New homepage

CHANGELOG.md

@@ -8,6 +8,7 @@
 - Fix CI trigger GitLab pipeline job [#635](https://github.com/datagouv/udata-front/pull/635)
 - New footer newsletter design [#634](https://github.com/datagouv/udata-front/pull/634)
 - Fix dropdown keyboard navigation [#637](https://github.com/datagouv/udata-front/pull/637)
+- New homepage [#626](https://github.com/datagouv/udata-front/pull/626)
 
 ## 6.0.7 (2024-12-20)
 

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,12 @@ each(@colors, {
     --success-625-425: #18753c;
 }
 
+.bg-grey-125-dark {
+    background-color: #2a2a2a;
+    --hover: var(--grey-200-850);
+    --active: var(--grey-425-625);
+}
+
 .bg-contrast-grey {
     background-color: @background-contrast-grey;
 }
@@ -129,6 +135,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;
 }
@@ -44,6 +48,10 @@ h6,
     font-weight: 800 !important;
 }
 
+.font-300 {
+    font-weight: 300 !important;
+}
+
 .sup {
     display: inline-block;
     font-weight: 300;
@@ -121,6 +129,11 @@ each(@font-sizes, {
     .fs-@{value} {
         font-size: @@var !important;
     }
+    @media @dsfr-query-md {
+        .fs-md-@{value} {
+            font-size: @@var !important;
+        }
+    }
 });
 
 .text-decoration-underline {

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/layout/grid.less

@@ -62,6 +62,10 @@
     top: -1rem;
 }
 
+.mb-n8w {
+    margin-bottom: -4rem;
+}
+
 .flex {
     display: flex;
 }
@@ -170,6 +174,10 @@
     max-width: 100%;
 }
 
+.mw-70w {
+    max-width: 35rem;
+}
+
 .min-width-0 {
     min-width: 0;
 }
@@ -208,6 +216,12 @@
     }
 }
 
+@media @dsfr-query-lg {
+    .order-lg-2 {
+        .order-2;
+    }
+}
+
 .fr-mt-n9v {
     margin-top: -2.5rem !important;
 }

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

@@ -14,3 +14,45 @@
         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;
+}
+
+.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;
+}
+
+.exploration-cards .fr-card__img img {
+    aspect-ratio: auto;
+}

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;