diff --git a/src/frontend/src/features/home/components/IntroSlider.tsx b/src/frontend/src/features/home/components/IntroSlider.tsx index bde8b148..f47fa6a5 100644 --- a/src/frontend/src/features/home/components/IntroSlider.tsx +++ b/src/frontend/src/features/home/components/IntroSlider.tsx @@ -113,6 +113,27 @@ const Slide = styled('div', { }, }) +const TextAnimation = styled('div', { + base: { + display: 'flex', + flexDirection: 'column', + gap: '0.5rem', + }, + variants: { + visible: { + true: { + opacity: 1, + transform: 'none', + transition: 'opacity ease-in .3s, transform ease-in .3s', + }, + false: { + opacity: 0, + transform: 'translateX(-30%)', + }, + }, + }, +}) + type Slide = { key: string img: string @@ -166,8 +187,10 @@ export const IntroSlider = () => { {SLIDES.map((slide, index) => ( {t(`${slide.key}.imgAlt`)} - {t(`${slide.key}.title`)} - {t(`${slide.key}.body`)} + + {t(`${slide.key}.title`)} + {t(`${slide.key}.body`)} + ))}