🚧(frontend) add intro slider component with feature slides

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.
2024-11-16 18:29:30 +01:00
parent 7ddc448c88
commit 7cee409d22
2 changed files with 49 additions and 0 deletions
--- a/src/frontend/src/assets/intro-slider/1.png
+++ b/src/frontend/src/assets/intro-slider/1.png
--- a/src/frontend/src/features/home/components/IntroSlider.tsx
+++ b/src/frontend/src/features/home/components/IntroSlider.tsx
@@ -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>
+    </>
+  )
+}