studio/meet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚧(frontend) add intro slider component with feature slides

Browse Source 
Created a component for an intro slider to showcase app features.
Each slide will include a minimal illustration and concise descriptions.

Work In Progress, Slide logic will be added in upcomming commits.
This commit is contained in:
lebaudantoine
2024-11-16 18:29:30 +01:00
committed by aleb_the_flash
parent 7ddc448c88
commit 7cee409d22
2 changed files with 49 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/frontend/src/assets/intro-slider/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 177 KiB

49
src/frontend/src/features/home/components/IntroSlider.tsx Normal file
View File

@@ -0,0 +1,49 @@
import firstSlide from '@/assets/intro-slider/1.png'
import { styled, VStack } from '@/styled-system/jsx'
const Heading = styled('h2', {
base: {
width: 'fit-content',
marginBottom: 0,
fontSize: '1.5rem',
marginTop: '0.75rem',
lineHeight: '2rem',
maxWidth: '23rem',
textAlign: 'center',
textWrap: 'pretty',
},
})
const Body = styled('p', {
base: {
maxWidth: '23rem',
textAlign: 'center',
textWrap: 'pretty',
lineHeight: '1.2rem',
fontSize: '1rem',
},
})
const Image = styled('img', {
base: {
maxHeight: '330px',
height: '100%',
width: 'fit-content',
},
})
// todo - refactor it in a proper slider, only displaying a single slide yet
export const IntroSlider = () => {
return (
<>
<Image src={firstSlide} alt="" />
<VStack justify={'center'} gap={0.5}>
<Heading>Essayez Visio pour simplifier votre quotidien</Heading>
<Body>
Découvrez une solution intuitive et accessible, conçue pour tous les
agents publics et leurs partenaires, et bien plus encore.
</Body>
</VStack>
</>
)
}