Complete partners

InseeFrLab · Sep 9, 2024 · 2a66d5c · 2a66d5c
1 parent 9f2b676
commit 2a66d5c
Show file tree

Hide file tree

Showing 5 changed files with 156 additions and 67 deletions.
diff --git a/package.json b/package.json
@@ -37,41 +37,43 @@
     "dependencies": {
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
-        "@mui/material": "^5.14.8",
         "@mui/icons-material": "^5.14.8",
+        "@mui/material": "^5.14.8",
+        "color": "^4.2.3",
         "evt": "^2.5.2",
         "github-pages-plugin-for-type-route": "^0.1.1",
-        "gitlanding": "^1.0.0",
+        "gitlanding": "^1.0.9",
+        "i18nifty": "^2.0.0",
         "memoizee": "^0.4.15",
         "onyxia-ui": "^1.0.0",
         "powerhooks": "^1.0.0",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
         "tsafe": "^1.6.4",
         "tss-react": "^4.9.0",
-        "type-route": "^1.0.1",
-        "i18nifty": "^2.0.0",
-        "react": "18.2.0",
-        "react-dom": "18.2.0"
+        "type-route": "^1.0.1"
     },
     "devDependencies": {
-        "@types/node": "18.11.7",
-        "@types/react": "18.0.24",
-        "@types/react-dom": "18.0.8",
         "@storybook/addon-actions": "^6.3.7",
         "@storybook/addon-essentials": "^6.3.7",
         "@storybook/addon-events": "6.2.9",
         "@storybook/addon-links": "^6.3.7",
         "@storybook/node-logger": "^6.3.7",
         "@storybook/preset-create-react-app": "^3.2.0",
         "@storybook/react": "^6.3.7",
+        "@types/color": "^3.0.6",
         "@types/memoizee": "^0.4.6",
+        "@types/node": "18.11.7",
+        "@types/react": "18.0.24",
+        "@types/react-dom": "18.0.8",
         "circular-dependency-plugin": "^5.2.0",
         "eslint-config-prettier": "^8.3.0",
+        "eslint-plugin-tss-unused-classes": "^0.0.4",
         "prettier": "^2.3.0",
         "react-app-rewired": "^2.2.1",
         "react-scripts": "5.0.1",
         "ts-node": "^10.1.0",
-        "typescript": "^4.8.4",
-        "eslint-plugin-tss-unused-classes": "^0.0.4"
+        "typescript": "^4.8.4"
     },
     "eslintConfig": {
         "plugins": [

diff --git a/src/ui/App.tsx b/src/ui/App.tsx
@@ -21,6 +21,7 @@ import { Evt } from "evt";
 import { breakpointsValues } from "onyxia-ui";
 import { declareComponentKeys } from "i18nifty";
 import { GlFooter } from "gitlanding/GlFooter";
+import { GlobalStyles } from "tss-react";
 
 /* spell-checker: disable */
 export const App = memo(() => {
@@ -58,6 +59,13 @@ export const App = memo(() => {
 
     return (
         <>
+            <GlobalStyles
+                styles={{
+                    html: {
+                        scrollBehavior: "smooth",
+                    },
+                }}
+            />
             <GlTemplate
                 header={
                     <GlHeader

diff --git a/src/ui/pages/Home.tsx b/src/ui/pages/Home.tsx
@@ -43,6 +43,8 @@ export function Home() {
     const { classes, theme, css } = useStyles();
     const { lang } = useLang();
 
+    const testimonialsSectionId = "testimonials";
+
     return (
         <>
             <GlHero
@@ -68,13 +70,19 @@ export function Home() {
                 }}
                 className={classes.firstHero}
             />
-            <LogoCarousel  className={css({ 
+            <LogoCarousel  
+            testimonialSectionId={testimonialsSectionId}
+            className={css({ 
                 maxWidth: "min(1250px, 90%)",
                 overflow: "visible",
                 margin: "auto",
 
-            })} />
+            })} 
+            />
             <GlYoutubeVideoSection
+                className={css({
+                    marginTop: theme.spacing(7)
+                })}
                 title={t("Onyxia in action")}
                 src="https://www.youtube.com/embed/FvpNfVrxBFM"
                 hasAnimation={true}
@@ -170,6 +178,7 @@ export function Home() {
             />
             <GlSectionDivider />
             <GlSlider
+                id={testimonialsSectionId}
                 title={t("They have their own Onyxia Datalab")}
                 autoPlayTimeInterval={4}
                 classes={{
@@ -304,6 +313,7 @@ const useStyles = tss.withName({ Home }).create(({ theme }) => ({
 
             return {};
         })(),
+        "marginBottom": theme.spacing(5),
         "maxWidth": 700,
     },
     "articleImage": {

diff --git a/src/ui/pages/LogoCarousel.tsx b/src/ui/pages/LogoCarousel.tsx
@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import Color from "color";
 import logoExpertiseFranceMonochromeDarkPng from "ui/assets/img/Logo_ExpertiseFrance_monochrome_dark.png";
 import logoExpertiseFranceMonochromeLightPng from "ui/assets/img/Logo_ExpertiseFrance_monochrome_light.png";
 import logoInseeMonochromeLightPng from "ui/assets/img/Logo_Insee_monochrome_light.png";
@@ -20,15 +21,16 @@ const getLogos = (isDark: boolean) => [
     { src: isDark ? logoStatisticNorwayMonochromeDarkPng : logoStatisticNorwayMonochromeLightPng, alt: "Logo Statistic Norway" },
 ] as const;
 
-type Props= {
+type Props = {
     className?: string;
+    testimonialSectionId: string;
 };
 
 export function LogoCarousel(
     props: Props
 ) {
 
-    const { className } = props;
+    const { className, testimonialSectionId } = props;
 
     const { classes, theme, cx, css } = useStyles();
 
@@ -85,7 +87,12 @@ export function LogoCarousel(
             {renderGroup(false)}
             {renderGroup(true)}
             <div className={classes.overlay}>
-                <Button>See testimonials</Button>
+                <Button
+                    href={`#${testimonialSectionId}`}
+                    doOpenNewTabIfHref={false}
+                >
+                    See testimonials
+                </Button>
             </div>
         </div>
     );
@@ -96,47 +103,50 @@ const useStyles = tss
     .withName({ LogoCarousel })
     .withNestedSelectors<"overlay">()
     .create(({ theme, classes }) => ({
-    root: {
-        ...theme.spacing.topBottom("padding", 4),
-        overflow: "hidden", 
-        display: "flex",
-        alignItems: "center",
-        maskImage:
-            "linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%)",
-        position: "relative",
-        [`&:hover .${classes.overlay}`]: {
+        root: {
+            ...theme.spacing.topBottom("padding", 5),
+            overflow: "hidden",
             display: "flex",
-        }
-    },
-    overlay: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        display: "none",
-        alignItems: "center",
-        justifyContent: "center",
-        //backgroundColor: theme.colors.useCases.surfaces.background, 
-        backdropFilter: "blur(10px)", 
-    },
-    group: {
-        justifyContent: "space-around",
-        display: "flex",
-        gap: theme.spacing(7),
-        animation: `${keyframes({
-            "from": {
-                transform: "translateX(0)",
-            },
-            "to": {
-                transform: "translateX(-100%)",
-            },
-        })} 30s linear infinite`,
-        flexShrink: 0,
-        minWidth: "100%",
-    },
-    logo: {
-        height: "auto", 
-        objectFit: "contain", 
-    },
-}));
+            alignItems: "center",
+            maskImage:
+                "linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%)",
+            position: "relative",
+            [`&:hover .${classes.overlay}`]: {
+                display: "flex",
+            }
+        },
+        overlay: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: "none",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: new Color(theme.colors.useCases.surfaces.background,)
+                .rgb()
+                .alpha(0.8)
+                .string(),
+            backdropFilter: "blur(5px)",
+        },
+        group: {
+            justifyContent: "space-around",
+            display: "flex",
+            gap: theme.spacing(7),
+            animation: `${keyframes({
+                "from": {
+                    transform: "translateX(0)",
+                },
+                "to": {
+                    transform: "translateX(-100%)",
+                },
+            })} 30s linear infinite`,
+            flexShrink: 0,
+            minWidth: "100%",
+        },
+        logo: {
+            height: "auto",
+            objectFit: "contain",
+        },
+    }));
diff --git a/yarn.lock b/yarn.lock
@@ -3443,6 +3443,25 @@
   dependencies:
     "@types/node" "*"
 
+"@types/color-convert@*":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/color-convert/-/color-convert-2.0.3.tgz#e93f5c991eda87a945058b47044f5f0008b0dce9"
+  integrity sha512-2Q6wzrNiuEvYxVQqhh7sXM2mhIhvZR/Paq4FdsQkOMgWsCIkKvSGj8Le1/XalulrmgOzPMqNa0ix+ePY4hTrfg==
+  dependencies:
+    "@types/color-name" "*"
+
+"@types/color-name@*":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.4.tgz#e002611ff627347818d440a05e81650e9a4053b8"
+  integrity sha512-hulKeREDdLFesGQjl96+4aoJSHY5b2GRjagzzcqCfIrWhe5vkCqIvrLbqzBaI1q94Vg8DNJZZqTR5ocdWmWclg==
+
+"@types/color@^3.0.6":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/color/-/color-3.0.6.tgz#29c27a99d4de2975e1676712679a0bd7f646a3fb"
+  integrity sha512-NMiNcZFRUAiUUCCf7zkAelY8eV3aKqfbzyFQlXpPIEeoNDbsEHGpb854V3gzTsGKYj830I5zPuOwU/TP5/cW6A==
+  dependencies:
+    "@types/color-convert" "*"
+
 "@types/connect-history-api-fallback@^1.3.5":
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz#d1f7a8a09d0ed5a57aee5ae9c18ab9b803205dae"
@@ -5654,7 +5673,7 @@ color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-string@^1.5.4:
+color-string@^1.5.4, color-string@^1.9.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
   integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
@@ -5675,6 +5694,14 @@ [email protected]:
     color-convert "^1.9.1"
     color-string "^1.5.4"
 
+color@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
+  integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
+  dependencies:
+    color-convert "^2.0.1"
+    color-string "^1.9.0"
+
 colord@^2.9.1:
   version "2.9.3"
   resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43"
@@ -7285,6 +7312,15 @@ evt@^2.5.2:
     run-exclusive "^2.2.19"
     tsafe "^1.6.4"
 
+evt@^2.5.7:
+  version "2.5.7"
+  resolved "https://registry.yarnpkg.com/evt/-/evt-2.5.7.tgz#55c5f8ff910f4b7531bfac91e963d4cb3231f253"
+  integrity sha512-dr7Wd16ry5F8WNU1xXLKpFpO3HsoAGg8zC48e08vDdzMzGWCP9/QFGt1PQptEEDh8SwYP3EL8M+d/Gb0kgUp6g==
+  dependencies:
+    minimal-polyfills "^2.2.3"
+    run-exclusive "^2.2.19"
+    tsafe "^1.6.6"
+
 exec-sh@^0.3.2:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.6.tgz#ff264f9e325519a60cb5e273692943483cca63bc"
@@ -7937,22 +7973,22 @@ github-slugger@^1.0.0:
   resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.5.0.tgz#17891bbc73232051474d68bd867a34625c955f7d"
   integrity sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw==
 
-gitlanding@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/gitlanding/-/gitlanding-1.0.0.tgz#337cba3a323613916d95306cabd3c5999b91853e"
-  integrity sha512-cHal1M9hVlnFabSD6F9ZKg9ThmQQtZzu0avmVEPnO+3pdk0sLLc1OP0n/puaV2y8rYA1wR5iqNuAxKwGJq1jlQ==
+gitlanding@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/gitlanding/-/gitlanding-1.0.9.tgz#1ffa9067c6b8ee7b920c6a187bbcf90f7dc7796a"
+  integrity sha512-Ct0GhhPr3vgGOzXaeEsDuNmsEiuCeNfy1829+57jgxrW40/TLDK3V8PqfjnJeOUjzMMkVbLApJlkzTqlTdq33w==
   dependencies:
     "@mui/icons-material" "^5.5.0"
     embla-carousel-react "^7.0.3"
     framer-motion "^4.1.17"
     memoizee "^0.4.15"
-    powerhooks "^1.0.0"
+    powerhooks "^1.0.3"
     react-github-btn "^1.2.0"
     react-markdown "^5.0.3"
     react-svg "^15.0.4"
     react-syntax-highlighter "^15.5.0"
-    tsafe "^1.6.4"
-    tss-react "^4.9.0"
+    tsafe "^1.6.5"
+    tss-react "^4.9.2"
     typeface-work-sans "^1.1.13"
 
 glob-parent@^3.1.0:
@@ -12023,6 +12059,15 @@ powerhooks@^1.0.1:
     memoizee "^0.4.15"
     tsafe "^1.6.4"
 
+powerhooks@^1.0.3:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/powerhooks/-/powerhooks-1.0.13.tgz#4642d7c16bdc31d444403f18e0fac26bf7e96ad6"
+  integrity sha512-nDDYfklVEWcYLkKVtVxxb0UA5pUkkmAHOxWOAveTZT6LJDZelcc8cDsuoQO1zjQkkAFO3l4COyJ/8v2tJGOOEQ==
+  dependencies:
+    evt "^2.5.7"
+    memoizee "^0.4.15"
+    tsafe "^1.7.2"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -14326,6 +14371,11 @@ tsafe@^1.6.4:
   resolved "https://registry.yarnpkg.com/tsafe/-/tsafe-1.6.4.tgz#048a114761714538c72f16abd25bb247d4e3780e"
   integrity sha512-l4Z54QFGHO8GF0gBpb3yPGHjkIkIirl8rwW+lMBmtEMzOJeRs8BdjkDEx6nU8Ak9PQVp/KNDtECxTja8MMIDoA==
 
+tsafe@^1.6.5, tsafe@^1.6.6, tsafe@^1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/tsafe/-/tsafe-1.7.2.tgz#0f63d414876287ad01b135f832722f93e22da374"
+  integrity sha512-dAPfQLhCfCRre5qs+Z5Q2a7s2CV7RxffZUmvj7puGaePYjECzWREJFd3w4XSFe/T5tbxgowfItA/JSSZ6Ma3dA==
+
 tsconfig-paths@^3.14.1:
   version "3.14.1"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"
@@ -14355,6 +14405,15 @@ tss-react@^4.9.0:
     "@emotion/serialize" "*"
     "@emotion/utils" "*"
 
+tss-react@^4.9.2:
+  version "4.9.13"
+  resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-4.9.13.tgz#e6ac0bfea3977e58b5ef5a261cd0b035e6bd8254"
+  integrity sha512-Gu19qqPH8/SAyKVIgDE5qHygirEDnNIQcXhiEc+l4Q9T7C1sfvUnbVWs+yBpmN26/wyk4FTOupjYS2wq4vH0yA==
+  dependencies:
+    "@emotion/cache" "*"
+    "@emotion/serialize" "*"
+    "@emotion/utils" "*"
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"