improve carousel component

landing-page/components/PartnerList.tsx

@@ -1,9 +1,7 @@
 import { tw } from '@twind/core'
 import Image from 'next/image'
-import { VerticalDivider } from '@helpwave/common/components/VerticalDivider'
 import { Span } from '@helpwave/common/components/Span'
-import Scrollbars from 'react-custom-scrollbars-2'
-import { DividerInserter } from '@helpwave/common/components/layout/DividerInserter'
+import { Carousel } from '@helpwave/common/components/layout/Carousel'
 
 export type Partner = {
   name: string,
@@ -25,27 +23,34 @@ export const PartnerList = ({
   return (
     <div className={tw('flex flex-col gap-y-4 items-center w-full')}>
       <Span type="title" className={tw('!text-2xl')}>{title}</Span>
-      <Scrollbars
-        autoHeight={true}
-        autoHeightMax={120}
-        universal={true}
+      <Carousel
+        hintNext={true} isLooping={true} isAutoLooping={true}
+        heights={{
+          tablet: 100,
+          mobile: 100,
+          desktop: 100
+        }} itemWidths={{
+          desktop: '20%',
+          tablet: '33%',
+          mobile: '50%'
+        }}
+        blurColor="transparent"
+        autoLoopingTimeOut={1000}
+        autoLoopAnimationTime={5000}
       >
-        <DividerInserter
-          className={tw('flex flex-row gap-x-6 items-center')}
-          divider={(index) => (<VerticalDivider key={index} height={120}/>)}
-        >
-          {partners.map(partner => (
+        {partners.map(partner => (
+          <div key={partner.name} className={tw('flex flex-col h-full items-center justify-center')}>
             <Image
               key={partner.name}
               width={0}
               height={0}
               src={partner.url}
               alt={partner.name}
-              className={tw('w-auto max-h-[60px]')}
+              className={tw('w-auto max-h-[100px] py-2 px-4')}
             />
-          ))}
-        </DividerInserter>
-      </Scrollbars>
+          </div>
+        ))}
+      </Carousel>
     </div>
   )
 }

landing-page/components/sections/landing/StepsToDigitalizationSection.tsx

@@ -3,6 +3,7 @@ import type { Languages } from '@helpwave/common/hooks/useLanguage'
 import { useTranslation } from '@helpwave/common/hooks/useTranslation'
 import { Span } from '@helpwave/common/components/Span'
 import { MarkdownInterpreter } from '@helpwave/common/components/MarkdownInterpreter'
+import type { TextImageProps } from '@helpwave/common/components/TextImage'
 import { TextImage } from '@helpwave/common/components/TextImage'
 import { Carousel } from '@helpwave/common/components/layout/Carousel'
 import { useState } from 'react'
@@ -54,43 +55,57 @@ export const StepsToDigitalizationSection = () => {
   const translation = useTranslation(defaultStepsToDigitalizationSectionTranslation)
   const [modalValue, setModalValue] = useState<{titleText: string, description: string}>()
 
+  const items: TextImageProps[] = [
+    {
+      badge: `${translation.step} #1`,
+      title: translation.step1Title,
+      description: translation.step1Description,
+      // make attribution https://www.freepik.com/free-photo/doctors-looking-laptop-while-sitting_5480800.htm#fromView=search&page=1&position=38&uuid=4c39262c-c1b1-4f11-a15e-7446ad1974d3
+      imageUrl: 'https://cdn.helpwave.de/landing_page/doctors_discussing.jpg',
+      color: 'primary',
+      onShowMoreClicked: () => setModalValue({
+        titleText: translation.step1Title,
+        description: translation.step1Description
+      })
+    },
+    {
+      badge: `${translation.step} #2`,
+      title: translation.step2Title,
+      description: translation.step2Description,
+      // make attribution https://www.freepik.com/free-photo/wide-shot-huge-tree-trunk-near-lake-surrounded-by-trees-blue-sky_7841618.htm#fromView=search&page=1&position=0&uuid=0752105f-3120-4f34-b3b7-48dd4a616223
+      imageUrl: 'https://cdn.helpwave.de/landing_page/lake.jpg',
+      color: 'secondary',
+      onShowMoreClicked: () => setModalValue({
+        titleText: translation.step2Title,
+        description: translation.step2Description
+      })
+    },
+    {
+      badge: `${translation.step} #3`,
+      title: translation.step3Title,
+      description: translation.step3Description,
+      // make attribution https://www.freepik.com/free-vector/infographic-dashboard-element-set_6209714.htm#fromView=search&page=1&position=45&uuid=12db1ee2-bec5-40ce-a317-5d240ad56f12
+      imageUrl: 'https://cdn.helpwave.de/landing_page/dashboard.jpg',
+      color: 'secondaryDark',
+      onShowMoreClicked: () => setModalValue({
+        titleText: translation.step3Title,
+        description: translation.step3Description
+      })
+    },
+  ]
+
   return (
-    <SectionBase className={tw('flex flex-col gap-y-8 w-full !px-0 !max-w-[1600px]')}>
+    <SectionBase className={tw('flex flex-col gap-y-8 w-full !max-w-[1600px]')} outerClassName={tw('!px-0')}>
       <div className={tw('flex flex-col items-center text-center gap-y-2')}>
         <h2><Span type="title" className={tw('!text-3xl')}><MarkdownInterpreter text={translation.title}/></Span></h2>
         <Span className={tw('font-space font-semibold')}><MarkdownInterpreter text={translation.description}/></Span>
       </div>
-      <Carousel hintNext={true} heights={{ tablet: 300 }}>
-        <TextImage
-          badge={`${translation.step} #1`}
-          title={translation.step1Title}
-          description={translation.step1Description}
-          // TODO make attribution https://www.freepik.com/free-photo/doctors-looking-laptop-while-sitting_5480800.htm#fromView=search&page=1&position=38&uuid=4c39262c-c1b1-4f11-a15e-7446ad1974d3
-          imageUrl="https://cdn.helpwave.de/landing_page/doctors_discussing.jpg"
-          color="primary"
-          className={tw('h-full overflow-hidden')}
-          onShowMoreClicked={() => setModalValue({ titleText: translation.step1Title, description: translation.step1Description })}
-        />
-        <TextImage
-          badge={`${translation.step} #2`}
-          title={translation.step2Title}
-          description={translation.step2Description}
-          // TODO make attribution https://www.freepik.com/free-photo/wide-shot-huge-tree-trunk-near-lake-surrounded-by-trees-blue-sky_7841618.htm#fromView=search&page=1&position=0&uuid=0752105f-3120-4f34-b3b7-48dd4a616223
-          imageUrl="https://cdn.helpwave.de/landing_page/lake.jpg"
-          color="secondary"
-          className={tw('h-full overflow-hidden')}
-          onShowMoreClicked={() => setModalValue({ titleText: translation.step2Title, description: translation.step2Description })}
-        />
-        <TextImage
-          badge={`${translation.step} #3`}
-          title={translation.step3Title}
-          description={translation.step3Description}
-          // TODO make attribution https://www.freepik.com/free-vector/infographic-dashboard-element-set_6209714.htm#fromView=search&page=1&position=45&uuid=12db1ee2-bec5-40ce-a317-5d240ad56f12
-          imageUrl="https://cdn.helpwave.de/landing_page/dashboard.jpg"
-          color="secondaryDark"
-          className={tw('h-full overflow-hidden')}
-          onShowMoreClicked={() => setModalValue({ titleText: translation.step3Title, description: translation.step3Description })}
-        />
+      <Carousel hintNext={true} isLooping={true} isAutoLooping={true} heights={{ tablet: 300 }}>
+        {items.map((value, index) => (
+          <div key={index} className={tw('px-[2.5%] h-full')}>
+            <TextImage {...value} className={tw('h-full overflow-hidden')}/>
+          </div>
+        ))}
       </Carousel>
       <Modal
         id="stepsToDigitizationModal"

landing-page/components/sections/landing/StoriesSliderSection.tsx

@@ -1,6 +1,7 @@
 import { tw } from '@helpwave/common/twind'
 import type { Languages } from '@helpwave/common/hooks/useLanguage'
 import { useTranslation } from '@helpwave/common/hooks/useTranslation'
+import type { TextImageProps } from '@helpwave/common/components/TextImage'
 import { TextImage } from '@helpwave/common/components/TextImage'
 import { Carousel } from '@helpwave/common/components/layout/Carousel'
 import { useState } from 'react'
@@ -50,41 +51,55 @@ const defaultStorySliderSectionTranslation: Record<Languages, StorySliderSection
  */
 export const StorySliderSection = () => {
   const translation = useTranslation(defaultStorySliderSectionTranslation)
-  const [modalValue, setModalValue] = useState<{titleText: string, description: string}>()
+  const [modalValue, setModalValue] = useState<{ titleText: string, description: string }>()
+
+  const items: TextImageProps[] = [
+    {
+      badge: translation.chip1,
+      title: translation.title1,
+      description: translation.description1,
+      // make attribution https://www.freepik.com/free-photo/doctors-looking-laptop-while-sitting_5480800.htm#fromView=search&page=1&position=38&uuid=4c39262c-c1b1-4f11-a15e-7446ad1974d3
+      imageUrl: 'https://cdn.helpwave.de/landing_page/doctors_discussing.jpg',
+      color: 'primary',
+      onShowMoreClicked: () => setModalValue({
+        titleText: translation.title1,
+        description: translation.description1
+      })
+    },
+    {
+      badge: translation.chip2,
+      title: translation.title2,
+      description: translation.description2,
+      // make attribution https://www.freepik.com/free-photo/wide-shot-huge-tree-trunk-near-lake-surrounded-by-trees-blue-sky_7841618.htm#fromView=search&page=1&position=0&uuid=0752105f-3120-4f34-b3b7-48dd4a616223
+      imageUrl: 'https://cdn.helpwave.de/landing_page/lake.jpg',
+      color: 'secondary',
+      onShowMoreClicked: () => setModalValue({
+        titleText: translation.title2,
+        description: translation.description2
+      })
+    },
+    {
+      badge: translation.chip3,
+      title: translation.title3,
+      description: translation.description3,
+      // make attribution https://www.freepik.com/free-vector/infographic-dashboard-element-set_6209714.htm#fromView=search&page=1&position=45&uuid=12db1ee2-bec5-40ce-a317-5d240ad56f12
+      imageUrl: 'https://cdn.helpwave.de/landing_page/dashboard.jpg',
+      color: 'secondaryDark',
+      onShowMoreClicked: () => setModalValue({
+        titleText: translation.title3,
+        description: translation.description3
+      })
+    },
+  ]
 
   return (
-    <SectionBase className={tw('flex flex-col gap-y-8 w-full !px-0 !max-w-[1600px]')}>
-      <Carousel hintNext={true}>
-        <TextImage
-          badge={translation.chip1}
-          title={translation.title1}
-          description={translation.description1}
-          // TODO make attribution https://www.freepik.com/free-photo/doctors-looking-laptop-while-sitting_5480800.htm#fromView=search&page=1&position=38&uuid=4c39262c-c1b1-4f11-a15e-7446ad1974d3
-          imageUrl="https://cdn.helpwave.de/landing_page/doctors_discussing.jpg"
-          color="primary"
-          className={tw('h-full overflow-hidden')}
-          onShowMoreClicked={() => setModalValue({ titleText: translation.title1, description: translation.description1 })}
-        />
-        <TextImage
-          badge={translation.chip2}
-          title={translation.title2}
-          description={translation.description2}
-          // TODO make attribution https://www.freepik.com/free-photo/wide-shot-huge-tree-trunk-near-lake-surrounded-by-trees-blue-sky_7841618.htm#fromView=search&page=1&position=0&uuid=0752105f-3120-4f34-b3b7-48dd4a616223
-          imageUrl="https://cdn.helpwave.de/landing_page/lake.jpg"
-          color="secondary"
-          className={tw('h-full overflow-hidden')}
-          onShowMoreClicked={() => setModalValue({ titleText: translation.title2, description: translation.description2 })}
-        />
-        <TextImage
-          badge={translation.chip3}
-          title={translation.title3}
-          description={translation.description3}
-          // TODO make attribution https://www.freepik.com/free-vector/infographic-dashboard-element-set_6209714.htm#fromView=search&page=1&position=45&uuid=12db1ee2-bec5-40ce-a317-5d240ad56f12
-          imageUrl="https://cdn.helpwave.de/landing_page/dashboard.jpg"
-          color="secondaryDark"
-          className={tw('h-full overflow-hidden')}
-          onShowMoreClicked={() => setModalValue({ titleText: translation.title3, description: translation.description3 })}
-        />
+    <SectionBase className={tw('flex flex-col gap-y-8 w-full !max-w-[1600px]')} outerClassName={tw('!px-0')}>
+      <Carousel hintNext={true} isLooping={true} isAutoLooping={true} autoLoopingTimeOut={15000}>
+        {items.map((value, index) => (
+          <div key={index} className={tw('px-[2.5%] h-full')}>
+            <TextImage {...value} className={tw('h-full overflow-hidden')}/>
+          </div>
+        ))}
       </Carousel>
       <Modal
         id="storiesSliderModal"

landing-page/components/sections/story/StorySlider.tsx

@@ -1,6 +1,7 @@
 import { tw } from '@helpwave/common/twind'
 import type { Languages } from '@helpwave/common/hooks/useLanguage'
 import { useTranslation } from '@helpwave/common/hooks/useTranslation'
+import type { TextImageProps } from '@helpwave/common/components/TextImage'
 import { TextImage } from '@helpwave/common/components/TextImage'
 import { Carousel } from '@helpwave/common/components/layout/Carousel'
 import { useState } from 'react'
@@ -46,39 +47,53 @@ export const StoriesSliderSection = () => {
   const translation = useTranslation(defaultStoriesSliderSectionTranslation)
   const [modalValue, setModalValue] = useState<{titleText: string, description: string}>()
 
+  const items: TextImageProps[] = [
+    {
+      badge: `${translation.step} #1`,
+      title: translation.step1Title,
+      description: translation.step1Description,
+      // make attribution https://www.freepik.com/free-photo/doctors-looking-laptop-while-sitting_5480800.htm#fromView=search&page=1&position=38&uuid=4c39262c-c1b1-4f11-a15e-7446ad1974d3
+      imageUrl: 'https://cdn.helpwave.de/landing_page/doctors_discussing.jpg',
+      color: 'primary',
+      onShowMoreClicked: () => setModalValue({
+        titleText: translation.step1Title,
+        description: translation.step1Description
+      })
+    },
+    {
+      badge: `${translation.step} #2`,
+      title: translation.step2Title,
+      description: translation.step2Description,
+      // make attribution https://www.freepik.com/free-photo/wide-shot-huge-tree-trunk-near-lake-surrounded-by-trees-blue-sky_7841618.htm#fromView=search&page=1&position=0&uuid=0752105f-3120-4f34-b3b7-48dd4a616223
+      imageUrl: 'https://cdn.helpwave.de/landing_page/lake.jpg',
+      color: 'secondary',
+      onShowMoreClicked: () => setModalValue({
+        titleText: translation.step2Title,
+        description: translation.step2Description
+      })
+    },
+    {
+      badge: `${translation.step} #3`,
+      title: translation.step3Title,
+      description: translation.step3Description,
+      // make attribution https://www.freepik.com/free-vector/infographic-dashboard-element-set_6209714.htm#fromView=search&page=1&position=45&uuid=12db1ee2-bec5-40ce-a317-5d240ad56f12
+      imageUrl: 'https://cdn.helpwave.de/landing_page/dashboard.jpg',
+      color: 'secondaryDark',
+      onShowMoreClicked: () => setModalValue({
+        titleText: translation.step3Title,
+        description: translation.step3Description
+      })
+    },
+  ]
+
   return (
-    <SectionBase className={tw('flex flex-col gap-y-8 w-full !px-0 !max-w-[1600px]')}>
-      <Carousel hintNext={true}>
-        <TextImage
-          badge={`${translation.step} #1`}
-          title={translation.step1Title}
-          description={translation.step1Description}
-          // TODO make attribution https://www.freepik.com/free-photo/doctors-looking-laptop-while-sitting_5480800.htm#fromView=search&page=1&position=38&uuid=4c39262c-c1b1-4f11-a15e-7446ad1974d3
-          imageUrl="https://cdn.helpwave.de/landing_page/doctors_discussing.jpg"
-          color="primary"
-          className={tw('h-full overflow-hidden')}
-          onShowMoreClicked={() => setModalValue({ titleText: translation.step1Title, description: translation.step1Description })}
-        />
-        <TextImage
-          badge={`${translation.step} #2`}
-          title={translation.step2Title}
-          description={translation.step2Description}
-          // TODO make attribution https://www.freepik.com/free-photo/wide-shot-huge-tree-trunk-near-lake-surrounded-by-trees-blue-sky_7841618.htm#fromView=search&page=1&position=0&uuid=0752105f-3120-4f34-b3b7-48dd4a616223
-          imageUrl="https://cdn.helpwave.de/landing_page/lake.jpg"
-          color="secondary"
-          className={tw('h-full overflow-hidden')}
-          onShowMoreClicked={() => setModalValue({ titleText: translation.step2Title, description: translation.step2Description })}
-        />
-        <TextImage
-          badge={`${translation.step} #3`}
-          title={translation.step3Title}
-          description={translation.step3Description}
-          // TODO make attribution https://www.freepik.com/free-vector/infographic-dashboard-element-set_6209714.htm#fromView=search&page=1&position=45&uuid=12db1ee2-bec5-40ce-a317-5d240ad56f12
-          imageUrl="https://cdn.helpwave.de/landing_page/dashboard.jpg"
-          color="secondaryDark"
-          className={tw('h-full overflow-hidden')}
-          onShowMoreClicked={() => setModalValue({ titleText: translation.step3Title, description: translation.step3Description })}
-        />
+    <SectionBase className={tw('flex flex-col gap-y-8 w-full !max-w-[1600px]')} outerClassName={tw('!px-0')}>
+      <Carousel hintNext={true} isLooping={true} isAutoLooping={true} heights={{ tablet: 300 }}>
+        {items.map((value, index) => (
+          <div key={index} className={tw('px-[2.5%] h-full')}>
+            <TextImage {...value} className={tw('h-full overflow-hidden')}/>
+          </div>
+        ))}
       </Carousel>
       <Modal
         id="storySliderModal"