update companies

website/src/components/widgets/companies-section.tsx

@@ -25,6 +25,7 @@ import E2mLogoSvg from "@/images/companies/e2m.svg";
 import ExlrtLogoSvg from "@/images/companies/exlrt.svg";
 import EzeepLogoSvg from "@/images/companies/ezeep.svg";
 import FulcrumLogoSvg from "@/images/companies/fulcrum.svg";
+import GalaxusLogoSvg from "@/images/companies/galaxus.svg";
 import GiaLogoSvg from "@/images/companies/gia.svg";
 import HiloLogoSvg from "@/images/companies/hilo.svg";
 import IncloudLogoSvg from "@/images/companies/incloud.svg";
@@ -66,6 +67,11 @@ export const CompaniesSection: FC = () => (
               <Company {...SwissLifeLogoSvg} />
             </Link>
           </SwissLifeLogo>
+          <GalaxusLogo>
+            <Link to="https://www.galaxus.ch">
+              <Company {...GalaxusLogoSvg} />
+            </Link>
+          </GalaxusLogo>
         </Carousel>
         <Ticker>
           <GenericLogo width={140}>
@@ -250,20 +256,12 @@ export const CompaniesSection: FC = () => (
 );
 
 const FADE = keyframes`
-  0% {
-    opacity: 1;
-    z-index: 1;
+  0%, 33% {
+    opacity: 0;
   }
-  25% {
+  8%, 24% {
     opacity: 1;
   }
-  49% {
-    z-index: 1;
-  }
-  50% {
-    opacity: 0;
-    z-index: 0;
-  }
 `;
 
 const Carousel = styled.div`
@@ -283,17 +281,21 @@ const Carousel = styled.div`
 
   & > * {
     position: absolute;
-    animation: 12s ${FADE} linear infinite;
+    animation: ${FADE} 15s infinite;
     opacity: 0;
     z-index: 0;
   }
 
   & > *:nth-child(1) {
-    animation-delay: 0s;
+    animation-delay: 0;
   }
 
   & > *:nth-child(2) {
-    animation-delay: 6s;
+    animation-delay: 5s;
+  }
+
+  & > *:nth-child(3) {
+    animation-delay: 10s;
   }
 `;
 
@@ -313,6 +315,15 @@ const SwissLifeLogo = styled.div`
   }
 `;
 
+const GalaxusLogo = styled.div`
+  & svg {
+    min-height: 30px;
+    min-width: 150px;
+    height: 90px;
+    margin: 20px;
+  }
+`;
+
 const TICKER = keyframes`
   0% {
     transform: translate3d(0, 0, 0);