[apps/www] Create infinite slider

apps/www/src/components/ui/molecules/infinite-slider-logos/index.tsx

@@ -0,0 +1,65 @@
+import {ImageProps} from '@/models/image.model'
+import {cn} from '@/utils/toolbox'
+import Image from 'next/image'
+
+export type InfiniteSliderLogosProps = {
+  logos: Array<ImageProps>
+}
+
+export default function InfiniteSliderLogos(props: InfiniteSliderLogosProps) {
+  const logosLength = props.logos.length
+  const pixelsPerSecond = 100
+  const animationSpeed = (500 * logosLength) / 2 / pixelsPerSecond
+  const shouldAnimate = logosLength > 3
+  const logosRow = (
+    <>
+      {props.logos.map((logo, index) => (
+        <div
+          key={props.logos.length + index}
+          className='flex items-center justify-center mx-4 w-[234px] p-7 sm:p-8 lg:p-10 bg-[#151E31] rounded-2xl \
+          border border-slate-800'
+        >
+          <Image
+            className='max-h-6 sm:max-h-8 lg:max-h-10'
+            src={logo.url}
+            alt={logo.alternateText || logo.name}
+            width={logo.width}
+            height={logo.height}
+          />
+        </div>
+      ))}
+    </>
+  )
+
+  return (
+    <div
+      className='relative mt-12 overflow-hidden whitespace-nowrap sm:mx-12 /
+      [mask-image:_linear-gradient(to_right,_transparent_0,_white_32px,white_calc(100%-32px),_transparent_100%)]
+      sm:[mask-image:_linear-gradient(to_right,_transparent_0,_white_80px,white_calc(100%-80px),_transparent_100%)]'
+    >
+      <div
+        className={cn(!shouldAnimate && '!w-full justify-center', 'flex')}
+        style={{
+          width: `calc(500px * ${logosLength})`,
+          animationName: shouldAnimate ? `infiniteSliderAnimationFor${logosLength}` : 'none',
+          animationTimingFunction: 'linear',
+          animationIterationCount: 'infinite',
+          animationDuration: `${animationSpeed}s`
+        }}
+      >
+        {logosRow}
+        {shouldAnimate ? logosRow : null}
+      </div>
+      <style>{`
+        @keyframes infiniteSliderAnimationFor${logosLength} {
+          0% {
+            transform: translateX(0);
+          }
+          100% {
+            transform: translateX(calc(-500px * ${logosLength / 2}));
+          }
+        }
+      `}</style>
+    </div>
+  )
+}

apps/www/src/components/ui/molecules/infinite-slider-logos/infinite-slider-logos.stories.tsx

@@ -0,0 +1,20 @@
+import {imageFactory} from '../../../../tests/factories/image.factory'
+import InfiniteSliderLogos, {InfiniteSliderLogosProps} from './index'
+import React from 'react'
+import type {Meta} from '@storybook/react'
+
+const meta = {
+  title: 'components/Molecules/InfiniteSliderLogos',
+  component: InfiniteSliderLogos,
+  tags: ['autodocs'],
+  args: {
+    logos: Array.from({length: 4}, () => imageFactory())
+  }
+} satisfies Meta<typeof InfiniteSliderLogos>
+
+export default meta
+
+export const Default = {
+  name: 'Default',
+  render: (args: InfiniteSliderLogosProps) => <InfiniteSliderLogos {...args} />
+}

apps/www/src/components/ui/organisms/customer-sections/customer-logos-simple-with-title/index.tsx

@@ -12,7 +12,7 @@ export default function CustomerLogosSimpleWithTitle(props: CustomerLogosSimpleW
     <LogoCloudsSimpleWithTitle
       surtitle={props.surtitle}
       title={props.title}
-      images={props.customers.map((customer) => customer.image)}
+      logos={props.customers.map((customer) => customer.image)}
     />
   )
 }

apps/www/src/components/ui/organisms/logo-clouds/logo-clouds-simple-with-title/index.tsx

@@ -1,12 +1,11 @@
 import {ImageProps} from '@/models/image.model'
-import {cn} from '@/utils/toolbox'
 import ComponentLayout from '@/components/ui/atoms/component-layout'
-import Image from 'next/image'
+import InfiniteSliderLogos from '@/components/ui/molecules/infinite-slider-logos'
 
 export type LogoCloudsSimpleWithTitleProps = {
   surtitle: string
   title: string
-  images: Array<ImageProps>
+  logos: Array<ImageProps>
 }
 
 export default function LogoCloudsSimpleWithTitle(props: LogoCloudsSimpleWithTitleProps) {
@@ -27,23 +26,7 @@ export default function LogoCloudsSimpleWithTitle(props: LogoCloudsSimpleWithTit
                 {props.title}
               </h2>
             </div>
-            <div className='grid grid-cols-1 gap-x-6 gap-y-3 mt-8  mx-auto max-w-5xl lg:grid-cols-4 lg:mt-12'>
-              {props.images.map((image, index) => (
-                <div
-                  key={index}
-                  className='flex items-center justify-center w-full p-7 sm:p-8 lg:p-10 sm:h-28 lg:h-32 bg-[#151E31] \
-                rounded-2xl border border-slate-800'
-                >
-                  <Image
-                    className={cn(index === 0 ? 'max-h-5 sm:max-h-7 lg:max-h-6' : 'max-h-6 sm:max-h-8 lg:max-h-10')}
-                    src={image.url}
-                    alt={image.alternateText || image.name}
-                    width={image.width}
-                    height={image.height}
-                  />
-                </div>
-              ))}
-            </div>
+            <InfiniteSliderLogos logos={props.logos} />
           </div>
         </div>
       </div>

apps/www/src/components/ui/organisms/logo-clouds/logo-clouds-simple-with-title/logo-clouds-simple-with-title.stories.tsx

@@ -10,7 +10,7 @@ const meta = {
   args: {
     surtitle: faker.lorem.sentence(),
     title: faker.lorem.sentence(),
-    images: Array.from({length: 4}, () => imageFactory({category: 'logo'}))
+    logos: Array.from({length: 4}, () => imageFactory({category: 'logo'}))
   }
 } satisfies Meta<typeof LogoCloudsSimpleWithTitle>
 

apps/www/src/components/ui/organisms/partner-sections/partner-logos-simple-with-title/index.tsx

@@ -12,7 +12,7 @@ export default function PartnerLogosSimpleWithTitle(props: PartnerLogosSimpleWit
     <LogoCloudsSimpleWithTitle
       surtitle={props.surtitle}
       title={props.title}
-      images={props.partners.map((partner) => partner.image)}
+      logos={props.partners.map((partner) => partner.image)}
     />
   )
 }

apps/www/tailwind.config.ts

@@ -51,6 +51,10 @@ const config = {
         error: colors.red,
         background: '#0F172A'
       },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out'
+      },
       keyframes: {
         'accordion-down': {
           from: {height: '0'},
@@ -61,10 +65,6 @@ const config = {
           to: {height: '0'}
         }
       },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out'
-      },
       backgroundImage: {
         'text-gradient-gray':
           'linear-gradient(to left, rgba(248, 250, 252, 0.7) 10%, rgba(248, 250, 252, 1), rgba(248, 250, 252, 0.7) 90%)',