wip

56kcloud · Oct 10, 2024 · ffee206 · ffee206
1 parent b83a258
commit ffee206
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 27 deletions.
diff --git a/apps/www/src/components/ui/molecules/infinite-slider-logos/index.tsx b/apps/www/src/components/ui/molecules/infinite-slider-logos/index.tsx
@@ -0,0 +1,71 @@
+import {ImageProps} from '@/models/image.model'
+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
+
+  return (
+    <div
+      className='relative mt-12 mx-12 overflow-hidden whitespace-nowrap /
+      [mask-image:_linear-gradient(to_right,_transparent_0,_white_96px,white_calc(100%-96px),_transparent_100%)]'
+    >
+      <div
+        className='flex'
+        style={{
+          width: `calc(500px * ${logosLength})`,
+          animationName: `infiniteSliderAnimationFor${logosLength}`,
+          animationTimingFunction: 'linear',
+          animationIterationCount: 'infinite',
+          animationDuration: `${animationSpeed}s`
+        }}
+      >
+        {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>
+        ))}
+        {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>
+        ))}
+      </div>
+      <style>{`
+        @keyframes infiniteSliderAnimationFor${logosLength} {
+          0% {
+            transform: translateX(0);
+          }
+          100% {
+            transform: translateX(calc(-500px * ${logosLength / 2}));
+          }
+        }
+      `}</style>
+    </div>
+  )
+}
diff --git a/.../src/components/ui/organisms/customer-sections/customer-logos-simple-with-title/index.tsx b/.../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)}
     />
   )
 }
diff --git a/apps/www/src/components/ui/organisms/logo-clouds/logo-clouds-simple-with-title/index.tsx b/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>

diff --git a/...nisms/logo-clouds/logo-clouds-simple-with-title/logo-clouds-simple-with-title.stories.tsx b/...nisms/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>
 

diff --git a/...ww/src/components/ui/organisms/partner-sections/partner-logos-simple-with-title/index.tsx b/...ww/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)}
     />
   )
 }
diff --git a/apps/www/tailwind.config.ts b/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%)',