diff --git a/src/frontend/src/assets/intro-slider/1.png b/src/frontend/src/assets/intro-slider/1.png deleted file mode 100644 index 7c494a31..00000000 Binary files a/src/frontend/src/assets/intro-slider/1.png and /dev/null differ diff --git a/src/frontend/src/assets/intro-slider/1_solo.png b/src/frontend/src/assets/intro-slider/1_solo.png new file mode 100644 index 00000000..3d478e19 Binary files /dev/null and b/src/frontend/src/assets/intro-slider/1_solo.png differ diff --git a/src/frontend/src/assets/intro-slider/2_multiple.png b/src/frontend/src/assets/intro-slider/2_multiple.png new file mode 100644 index 00000000..8f874499 Binary files /dev/null and b/src/frontend/src/assets/intro-slider/2_multiple.png differ diff --git a/src/frontend/src/assets/intro-slider/3_resume.png b/src/frontend/src/assets/intro-slider/3_resume.png new file mode 100644 index 00000000..1cf00085 Binary files /dev/null and b/src/frontend/src/assets/intro-slider/3_resume.png differ diff --git a/src/frontend/src/features/home/components/IntroSlider.tsx b/src/frontend/src/features/home/components/IntroSlider.tsx index bcb001a9..bde8b148 100644 --- a/src/frontend/src/features/home/components/IntroSlider.tsx +++ b/src/frontend/src/features/home/components/IntroSlider.tsx @@ -1,5 +1,13 @@ -import firstSlide from '@/assets/intro-slider/1.png' -import { styled, VStack } from '@/styled-system/jsx' +import firstSlide from '@/assets/intro-slider/1_solo.png' +import secondSlide from '@/assets/intro-slider/2_multiple.png' +import thirdSlide from '@/assets/intro-slider/3_resume.png' + +import { styled } from '@/styled-system/jsx' +import { css } from '@/styled-system/css' +import { Button } from '@/primitives' +import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react' +import { useState } from 'react' +import { useTranslation } from 'react-i18next' const Heading = styled('h2', { base: { @@ -32,18 +40,161 @@ const Image = styled('img', { }, }) -// todo - refactor it in a proper slider, only displaying a single slide yet +const Dot = styled('div', { + base: { + borderRadius: '50%', + display: 'inline-block', + height: '.375rem', + margin: '0 .25rem', + width: '.375rem', + }, + variants: { + selected: { + true: { + backgroundColor: '#000091', + }, + false: { + backgroundColor: '#CACAFB', + }, + }, + }, +}) + +const Container = styled('div', { + base: { + display: 'flex', + flexDirection: 'column', + width: '100%', + justifyContent: 'space-between', + textAlign: 'center', + }, +}) + +const ButtonVerticalCenter = styled('div', { + base: { + marginTop: '10.3125rem', + transform: 'translateY(-50%)', + }, +}) + +const SlideContainer = styled('div', { + base: { + alignItems: 'stretch', + display: 'flex', + position: 'relative', + }, +}) + +const Slide = styled('div', { + base: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: '0.5rem', + justifyContent: 'start', + minHeight: '550px', + minWidth: '200px', + width: '22.625rem', + }, + variants: { + visible: { + true: { + visibility: 'visible', + position: 'static', + }, + false: { + visibility: 'hidden', + position: 'absolute', + }, + }, + }, + defaultVariants: { + visible: false, + }, +}) + +type Slide = { + key: string + img: string +} + +// todo - optimize how images are imported +const SLIDES: Slide[] = [ + { + key: 'slide1', + img: firstSlide, + }, + { + key: 'slide2', + img: secondSlide, + }, + { + key: 'slide3', + img: thirdSlide, + }, +] + export const IntroSlider = () => { + const [slideIndex, setSlideIndex] = useState(0) + const { t } = useTranslation('home', { keyPrefix: 'introSlider' }) + const NUMBER_SLIDES = SLIDES.length + return ( - <> - - - Essayez Visio pour simplifier votre quotidien - - Découvrez une solution intuitive et accessible, conçue pour tous les - agents publics et leurs partenaires, et bien plus encore. - - - + +
+
+ + + +
+ + {SLIDES.map((slide, index) => ( + + {t(`${slide.key}.imgAlt`)} + {t(`${slide.key}.title`)} + {t(`${slide.key}.body`)} + + ))} + +
+ + + +
+
+
+ {SLIDES.map((_, index) => ( + + ))} +
+ ) } diff --git a/src/frontend/src/locales/de/home.json b/src/frontend/src/locales/de/home.json index be5aeec7..ec1da2ba 100644 --- a/src/frontend/src/locales/de/home.json +++ b/src/frontend/src/locales/de/home.json @@ -23,5 +23,30 @@ "copy": "", "copied": "", "permissions": "" + }, + "introSlider": { + "previous": { + "label": "", + "tooltip": "" + }, + "next": { + "label": "", + "tooltip": "" + }, + "slide1": { + "title": "", + "body": "", + "imgAlt": "" + }, + "slide2": { + "title": "", + "body": "", + "imgAlt": "" + }, + "slide3": { + "title": "", + "body": "", + "imgAlt": "" + } } } diff --git a/src/frontend/src/locales/en/home.json b/src/frontend/src/locales/en/home.json index f4eb76da..5a3d522d 100644 --- a/src/frontend/src/locales/en/home.json +++ b/src/frontend/src/locales/en/home.json @@ -23,5 +23,30 @@ "copy": "Copy the meeting link", "copied": "Link copied to clipboard", "permissions": "People with this link do not need your permission to join this meeting." + }, + "introSlider": { + "previous": { + "label": "previous", + "tooltip": "previous" + }, + "next": { + "label": "next", + "tooltip": "next" + }, + "slide1": { + "title": "Try Visio to simplify your daily tasks", + "body": "Discover an intuitive and accessible solution, designed for all public agents, their partners, and much more.", + "imgAlt": "Illustration of a user-friendly and accessible collaboration platform" + }, + "slide2": { + "title": "Host group calls without limits", + "body": "Unlimited time meetings, up to 15 participants, with smooth and high-quality communication, no matter the group size.", + "imgAlt": "Image of a virtual meeting with multiple participants collaborating seamlessly" + }, + "slide3": { + "title": "Transform your meetings with AI", + "body": "Get accurate and actionable transcripts to boost your productivity. Feature in beta—try it now!", + "imgAlt": "Illustration of AI-powered note-taking in a virtual meeting" + } } } diff --git a/src/frontend/src/locales/fr/home.json b/src/frontend/src/locales/fr/home.json index 423af386..7aa56c5c 100644 --- a/src/frontend/src/locales/fr/home.json +++ b/src/frontend/src/locales/fr/home.json @@ -23,5 +23,30 @@ "copy": "Copier le lien de la réunion", "copied": "Lien copié dans le presse-papiers", "permissions": "Les personnes disposant de ce lien n'ont pas besoin de votre autorisation pour rejoindre cette réunion." + }, + "introSlider": { + "previous": { + "label": "précédent", + "tooltip": "précédent" + }, + "next": { + "label": "suivant", + "tooltip": "suivant" + }, + "slide1": { + "title": "Essayez Visio pour simplifier votre quotidien", + "body": "Découvrez une solution intuitive et accessible, conçue pour tous les agents publics et leurs partenaires, et bien plus encore.", + "imgAlt": "Illustration d'une plateforme de collaboration simple et accessible" + }, + "slide2": { + "title": "Organisez des appels de groupe sans limite", + "body": "Réunions sans limite de temps, jusqu'à 15 participants, avec une communication fluide et de haute qualité, quel que soit le nombre.", + "imgAlt": "Image d'une réunion virtuelle avec plusieurs participants collaborant efficacement" + }, + "slide3": { + "title": "Transformez vos réunions avec l'IA", + "body": "Obtenez des transcriptions précises et actionnables, pour booster votre productivité. Fonctionnalité en beta, essayez-la maintenant !", + "imgAlt": "Illustration de prise de notes assistée par l'IA dans une réunion virtuelle" + } } }