diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 304fd797bc..a48ef22668 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1,2 +1,2 @@ -* @navyakhurana @jmsrpp @cernus76 +* @navyakhurana @jmsrpp @cernus76 @julian-schambeck docs/ref-arch/ @SAP/architecture-center-admin diff --git a/generator-refArch/package-lock.json b/generator-refArch/package-lock.json index 9f3b20b536..8c5922aeb7 100644 --- a/generator-refArch/package-lock.json +++ b/generator-refArch/package-lock.json @@ -431,9 +431,9 @@ } }, "node_modules/@isaacs/brace-expansion": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/@isaacs/brace-expansion/-/brace-expansion-5.0.0.tgz", - "integrity": "sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==", + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/@isaacs/brace-expansion/-/brace-expansion-5.0.1.tgz", + "integrity": "sha512-WMz71T1JS624nWj2n2fnYAuPovhv7EUhk69R6i9dsVyzxt5eM3bjwvgk9L+APE1TRscGysAVMANkB0jh0LQZrQ==", "license": "MIT", "dependencies": { "@isaacs/balanced-match": "^4.0.1" diff --git a/package-lock.json b/package-lock.json index 538209f5da..b928e2c021 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "sap-architecture-center", - "version": "v2.2605.1", + "version": "v2.2606.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "sap-architecture-center", - "version": "v2.2605.1", + "version": "v2.2606.1", "dependencies": { "@docusaurus/core": "^3.9.2", "@docusaurus/plugin-content-docs": "^3.9.2", @@ -7884,9 +7884,9 @@ "license": "MIT" }, "node_modules/baseline-browser-mapping": { - "version": "2.8.15", - "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.15.tgz", - "integrity": "sha512-qsJ8/X+UypqxHXN75M7dF88jNK37dLBRW7LeUzCPz+TNs37G8cfWy9nWzS+LS//g600zrt2le9KuXt0rWfDz5Q==", + "version": "2.9.19", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.19.tgz", + "integrity": "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==", "license": "Apache-2.0", "bin": { "baseline-browser-mapping": "dist/cli.js" @@ -8117,9 +8117,9 @@ } }, "node_modules/browserslist": { - "version": "4.26.3", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.26.3.tgz", - "integrity": "sha512-lAUU+02RFBuCKQPj/P6NgjlbCnLBMp4UtgTx7vNHd3XSIJF87s9a5rA3aH2yw3GS9DqZAUbOtZdCCiZeVRqt0w==", + "version": "4.28.1", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz", + "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==", "funding": [ { "type": "opencollective", @@ -8136,11 +8136,11 @@ ], "license": "MIT", "dependencies": { - "baseline-browser-mapping": "^2.8.9", - "caniuse-lite": "^1.0.30001746", - "electron-to-chromium": "^1.5.227", - "node-releases": "^2.0.21", - "update-browserslist-db": "^1.1.3" + "baseline-browser-mapping": "^2.9.0", + "caniuse-lite": "^1.0.30001759", + "electron-to-chromium": "^1.5.263", + "node-releases": "^2.0.27", + "update-browserslist-db": "^1.2.0" }, "bin": { "browserslist": "cli.js" @@ -8306,9 +8306,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001749", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001749.tgz", - "integrity": "sha512-0rw2fJOmLfnzCRbkm8EyHL8SvI2Apu5UbnQuTsJ0ClgrH8hcwFooJ1s5R0EP8o8aVrFu8++ae29Kt9/gZAZp/Q==", + "version": "1.0.30001769", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001769.tgz", + "integrity": "sha512-BCfFL1sHijQlBGWBMuJyhZUhzo7wer5sVj9hqekB/7xn0Ypy+pER/edCYQm4exbXj4WiySGp40P8UuTh6w1srg==", "funding": [ { "type": "opencollective", @@ -10614,9 +10614,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.5.234", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.234.tgz", - "integrity": "sha512-RXfEp2x+VRYn8jbKfQlRImzoJU01kyDvVPBmG39eU2iuRVhuS6vQNocB8J0/8GrIMLnPzgz4eW6WiRnJkTuNWg==", + "version": "1.5.286", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.286.tgz", + "integrity": "sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A==", "license": "ISC" }, "node_modules/emoji-regex": { @@ -10673,13 +10673,13 @@ } }, "node_modules/enhanced-resolve": { - "version": "5.18.3", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz", - "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==", + "version": "5.19.0", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.19.0.tgz", + "integrity": "sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==", "license": "MIT", "dependencies": { "graceful-fs": "^4.2.4", - "tapable": "^2.2.0" + "tapable": "^2.3.0" }, "engines": { "node": ">=10.13.0" @@ -10731,9 +10731,9 @@ } }, "node_modules/es-module-lexer": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz", - "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz", + "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==", "license": "MIT" }, "node_modules/es-object-atoms": { @@ -16294,9 +16294,9 @@ } }, "node_modules/node-releases": { - "version": "2.0.23", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.23.tgz", - "integrity": "sha512-cCmFDMSm26S6tQSDpBCg/NR8NENrVPhAJSf+XbxBG4rPFaaonlEoE9wHQmun+cls499TQGSb7ZyPBRlzgKfpeg==", + "version": "2.0.27", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz", + "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==", "license": "MIT" }, "node_modules/normalize-path": { @@ -21321,9 +21321,9 @@ } }, "node_modules/terser-webpack-plugin": { - "version": "5.3.14", - "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.14.tgz", - "integrity": "sha512-vkZjpUjb6OMS7dhV+tILUW6BhpDR7P2L/aQSAv+Uwk+m8KATX9EccViHTJR2qDtACKPIYndLGCyl3FMo+r2LMw==", + "version": "5.3.16", + "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.16.tgz", + "integrity": "sha512-h9oBFCWrq78NyWWVcSwZarJkZ01c2AyGrzs1crmHZO3QUg9D61Wu4NPjBy69n7JqylFF5y+CsUZYmYEIZ3mR+Q==", "license": "MIT", "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", @@ -21810,9 +21810,9 @@ } }, "node_modules/update-browserslist-db": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz", - "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==", + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz", + "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==", "funding": [ { "type": "opencollective", @@ -22172,9 +22172,9 @@ "license": "MIT" }, "node_modules/watchpack": { - "version": "2.4.4", - "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz", - "integrity": "sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.1.tgz", + "integrity": "sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==", "license": "MIT", "dependencies": { "glob-to-regexp": "^0.4.1", @@ -22204,9 +22204,9 @@ } }, "node_modules/webpack": { - "version": "5.102.1", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.102.1.tgz", - "integrity": "sha512-7h/weGm9d/ywQ6qzJ+Xy+r9n/3qgp/thalBbpOi5i223dPXKi04IBtqPN9nTd+jBc7QKfvDbaBnFipYp4sJAUQ==", + "version": "5.105.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.105.0.tgz", + "integrity": "sha512-gX/dMkRQc7QOMzgTe6KsYFM7DxeIONQSui1s0n/0xht36HvrgbxtM1xBlgx596NbpHuQU8P7QpKwrZYwUX48nw==", "license": "MIT", "dependencies": { "@types/eslint-scope": "^3.7.7", @@ -22217,22 +22217,22 @@ "@webassemblyjs/wasm-parser": "^1.14.1", "acorn": "^8.15.0", "acorn-import-phases": "^1.0.3", - "browserslist": "^4.26.3", + "browserslist": "^4.28.1", "chrome-trace-event": "^1.0.2", - "enhanced-resolve": "^5.17.3", - "es-module-lexer": "^1.2.1", + "enhanced-resolve": "^5.19.0", + "es-module-lexer": "^2.0.0", "eslint-scope": "5.1.1", "events": "^3.2.0", "glob-to-regexp": "^0.4.1", "graceful-fs": "^4.2.11", "json-parse-even-better-errors": "^2.3.1", - "loader-runner": "^4.2.0", + "loader-runner": "^4.3.1", "mime-types": "^2.1.27", "neo-async": "^2.6.2", "schema-utils": "^4.3.3", "tapable": "^2.3.0", - "terser-webpack-plugin": "^5.3.11", - "watchpack": "^2.4.4", + "terser-webpack-plugin": "^5.3.16", + "watchpack": "^2.5.1", "webpack-sources": "^3.3.3" }, "bin": { diff --git a/package.json b/package.json index b8dcfaa4f0..8d28261952 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sap-architecture-center", - "version": "v2.2605.1", + "version": "v2.2606.1", "private": true, "scripts": { "clean": "rm -rf build", diff --git a/src/sections/TrustedTecPartnersSection.module.css b/src/sections/TrustedTecPartnersSection.module.css index 59d1c9dc9f..b24461cec9 100644 --- a/src/sections/TrustedTecPartnersSection.module.css +++ b/src/sections/TrustedTecPartnersSection.module.css @@ -29,6 +29,7 @@ justify-content: center; padding: 0 30px; box-sizing: border-box; + flex-shrink: 0; } .logoImg { @@ -38,11 +39,11 @@ max-width: 200px; display: block; object-fit: contain; + transition: transform 0.3s ease; } .logoImg:hover { transform: scale(1.2); - transition: transform 0.3s ease; } .title { @@ -63,6 +64,23 @@ overflow: hidden; } +/* Smooth infinite scroll container */ +.carouselTrack { + display: flex; + width: max-content; + animation: scroll 30s linear infinite; + will-change: transform; +} + +@keyframes scroll { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-33.333%); /* Move by 1/3 since we have 3 sets */ + } +} + .carouselLogo::before, .carouselLogo::after { content: ""; @@ -91,19 +109,6 @@ background: linear-gradient(to left, var(--carousel-fade-bg), transparent); } -.carouselLogo :global(.slick-slide) { - width: auto !important; - min-width: 120px; - max-width: 300px; -} - -.carouselLogo :global(.slick-slide) > div { - width: 100% !important; - display: flex; - justify-content: center; - align-items: center; -} - .logoList { display: none; } :root[data-theme='dark'] .title, @@ -122,9 +127,8 @@ padding: 0 20px; } - .carouselLogo :global(.slick-slide) { - min-width: 100px; - max-width: 200px; + .logoWrapper { + padding: 0 20px; } .innerWrapper { @@ -195,4 +199,4 @@ width: auto; height: auto; } -} +} \ No newline at end of file diff --git a/src/sections/TrustedTecPartnersSection.tsx b/src/sections/TrustedTecPartnersSection.tsx index ce53c8dd62..756ae5a1b5 100644 --- a/src/sections/TrustedTecPartnersSection.tsx +++ b/src/sections/TrustedTecPartnersSection.tsx @@ -1,11 +1,9 @@ -import React, { JSX, useRef } from 'react'; +import React, { JSX, useRef, useEffect } from 'react'; import useBaseUrl from '@docusaurus/useBaseUrl'; import { useColorMode } from '@docusaurus/theme-common'; import { Title, Text } from '@ui5/webcomponents-react'; import '@ui5/webcomponents-icons/dist/AllIcons'; import styles from './TrustedTecPartnersSection.module.css'; -import ReactCarousel from '@site/src/components/ReactCarousel'; -import Slider from 'react-slick'; import { useHistory } from '@docusaurus/router'; import { useSidebarFilterStore } from '@site/src/store/sidebar-store'; @@ -55,12 +53,12 @@ export default function TrustedTecPartnersSection(): JSX.Element { const { colorMode } = useColorMode(); const getImg = (name: string) => useBaseUrl(`/img/landingPage/${name}`); const docsUrl = useBaseUrl('/docs'); - const sliderRef = useRef(null); + const trackRef = useRef(null); const history = useHistory(); const setPartners = useSidebarFilterStore((state) => state.setPartners); const setTechDomains = useSidebarFilterStore((state) => state.setTechDomains); - function renderLogo(item, idx) { + function renderLogo(item, idx, isDuplicate = false) { const imgSrc = getImg(colorMode === 'dark' && item.darkImg ? item.darkImg : item.lightImg); const handleClick = (e) => { e.preventDefault(); @@ -81,36 +79,12 @@ export default function TrustedTecPartnersSection(): JSX.Element { }; return ( -
+
{ - if (sliderRef.current) { - sliderRef.current.slickPause(); - const track = sliderRef.current.innerSlider?.list?.querySelector( - '.slick-track' - ) as HTMLElement | null; - if (track) { - const computed = window.getComputedStyle(track).transform; - track.style.transform = computed; - track.style.transition = 'none'; - } - } - }} - onMouseLeave={() => { - if (sliderRef.current) { - const track = sliderRef.current.innerSlider?.list?.querySelector( - '.slick-track' - ) as HTMLElement | null; - if (track) { - track.style.transition = ''; // reset - } - sliderRef.current.slickPlay(); // resume - } - }} > {item.name} @@ -118,6 +92,35 @@ export default function TrustedTecPartnersSection(): JSX.Element { ); } + // Smooth infinite scroll animation using CSS + useEffect(() => { + const track = trackRef.current; + if (!track) return; + + let animationId: number; + let isPaused = false; + + // Pause on hover + const handleMouseEnter = () => { + isPaused = true; + track.style.animationPlayState = 'paused'; + }; + + const handleMouseLeave = () => { + isPaused = false; + track.style.animationPlayState = 'running'; + }; + + track.addEventListener('mouseenter', handleMouseEnter); + track.addEventListener('mouseleave', handleMouseLeave); + + return () => { + track.removeEventListener('mouseenter', handleMouseEnter); + track.removeEventListener('mouseleave', handleMouseLeave); + if (animationId) cancelAnimationFrame(animationId); + }; + }, []); + return (
@@ -125,39 +128,12 @@ export default function TrustedTecPartnersSection(): JSX.Element { Empowering Innovation Together
- already handled by logoList - settings: 'unslick', // disables carousel - }, - ]} - /> +
+ {/* Render logos three times for seamless infinite scroll */} + {logos.map((logo, idx) => renderLogo(logo, idx, false))} + {logos.map((logo, idx) => renderLogo(logo, idx, true))} + {logos.map((logo, idx) => renderLogo(logo, idx + 100, true))} +
{/* Static vertical list (mobile) */} @@ -165,4 +141,4 @@ export default function TrustedTecPartnersSection(): JSX.Element {
); -} +} \ No newline at end of file