({
return {};
})(),
+ "marginBottom": theme.spacing(5),
"maxWidth": 700,
},
"articleImage": {
diff --git a/src/ui/pages/LogoCarousel.tsx b/src/ui/pages/LogoCarousel.tsx
index 8392609..7290d0b 100644
--- 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)}
-
+
);
@@ -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
index bf30f61..cd3b41b 100644
--- 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 @@ color@3.1.3:
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"