page d'accueil producteur

benjaminpochat · Nov 11, 2024 · ed99792 · ed99792
1 parent e9394b2
commit ed99792
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 24 deletions.
diff --git a/frontend/app/src/App.css b/frontend/app/src/App.css
@@ -255,4 +255,28 @@
   background: url(resources/images/icons/svg/agriculture_biologique.svg);
   background-size: contain;
   background-repeat: no-repeat;
-}
+}
+
+.secure-payment-icon {
+  background: url(resources/images/icons/png/secure_payment.png);
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.invoices-icon {
+  background: url(resources/images/icons/png/invoices.png);
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.stock-availability-icon {
+  background: url(resources/images/icons/png/stock_availability.png);
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.package-label-icon {
+  background: url(resources/images/icons/png/package_label.png);
+  background-size: contain;
+  background-repeat: no-repeat;
+}
diff --git a/frontend/app/src/domains/commons/components/Footer.tsx b/frontend/app/src/domains/commons/components/Footer.tsx
@@ -45,7 +45,16 @@ export default function Footer() {
                 <div>N° TVA : FR6890129339900019</div>
             </div>
             <div className="footer-item">
-                <div>Icones par <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> sur <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
+                Icones par&ensp;
+                <a href="https://www.flaticon.com/authors/freepik" title="feepik">freepik</a> 
+                &ensp;,
+                <a href="https://www.flaticon.com/authors/smashicons" title="feepik">smashicons</a>
+                &ensp;,
+                <a href="https://www.flaticon.com/authors/monkik" title="feepik">monkik</a> 
+                &ensp;,
+                <a href="https://www.flaticon.com/authors/kiranshastry" title="feepik">kiranshastry</a> 
+                &ensp;sur&ensp;
+                <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
             </div>
         </div>
         {displayGeneralTermsAndConditions()}

diff --git a/frontend/app/src/layouts/producer/AnonymousLayout.tsx b/frontend/app/src/layouts/producer/AnonymousLayout.tsx
@@ -1,9 +1,10 @@
 import { styled } from '@mui/material/styles';
-import { AppBar, Box, Typography, CssBaseline, Toolbar, Grid, Paper, Button } from "@mui/material";
+import { AppBar, Box, Typography, CssBaseline, Toolbar, Grid, Paper, Button, IconButton } from "@mui/material";
 import { useKeycloak } from '@react-keycloak/web'
 import React from 'react';
 import { Navigate, useNavigate } from 'react-router-dom';
 import Footer from '../../domains/commons/components/Footer.tsx';
+import { Login } from '@mui/icons-material';
 
 export default function AnonymousLayout() {
 
@@ -27,6 +28,22 @@ export default function AnonymousLayout() {
     }
 
     function getAnonymousLayout() {
+        const functionDescriptionStyle = {
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-around',
+            alignItems: 'center',
+            flexWrap: 'nowrap',
+            gap: '1rem'
+        };
+        const authenticationActionStyle = {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            flexWrap: 'nowrap',
+            marginTop: '1rem',
+            gap: '1rem'
+        };
         return <Box>
             <CssBaseline />
             <AppBar
@@ -36,32 +53,59 @@ export default function AnonymousLayout() {
                     <Typography variant="h5" component="div" sx={{ flexGrow: 1 }}>
                         Viande en direct
                     </Typography>
+                    <IconButton onClick={login} color="inherit">
+                        <Login/>
+                    </IconButton>
                 </Toolbar>
             </AppBar>
             <Box>
                 <Toolbar />
-                <Grid container
-                    spacing={2}
-                >
-                    <Grid item xs={12}>
-                        <Item>
-                            <Typography>Bienvenu dans l'espace producteur de ViandeEnDirect.eu</Typography>
-                        </Item>
-                    </Grid>
-                    <Grid item xs={6}>
-                        <Item>
-                            <Typography>J'ai déjà un compte "producteur"</Typography>
-                            <Button onClick={login} variant='outlined'>Je me connecte</Button>
-                        </Item>
-                    </Grid>
-                    <Grid item xs={6}>
-                        <Item>
-                            <Typography>Je n'ai pas encore un compte "producteur"</Typography>
-                            <Button onClick={register} variant='contained'>Je crée un compte</Button>
-                        </Item>
-                    </Grid>
-                </Grid>
+                <Box sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    flexWrap: 'wrap',
+                    gap: '1rem',
+                    margin: '1rem'
+                }}>
+                    <Box sx={{marginBottom: '2rem'}}>
+                        <Typography variant='h3'>Simplifiez la vente directe de votre viande !</Typography>
+                        <Typography variant='h5'>Transformez votre étable en boutique en ligne avec viandeendirect.eu</Typography>
+                    </Box>
+
+                    <Box sx={functionDescriptionStyle}>
+                        <i style={{width:'3rem', height:'3rem'}} className="icon secure-payment-icon"></i>
+                        <Typography variant='h5'>Paiement sécurisé</Typography>
+                    </Box>
+
+                    <Box sx={functionDescriptionStyle}>
+                        <Typography variant='h5'>Gestion du stock simplifié</Typography>
+                        <i style={{width:'3rem', height:'3rem'}} className="icon stock-availability-icon"></i>
+                    </Box>
+
 
+                    <Box sx={functionDescriptionStyle}>
+                        <i style={{width:'3rem', height:'3rem'}} className="icon package-label-icon"></i>
+                        <Typography variant='h5'>Edition des étiquettes</Typography>
+                    </Box>
+
+                    <Box sx={functionDescriptionStyle}>
+                        <Typography variant='h5'>Edition des factures</Typography>
+                        <i style={{width:'3rem', height:'3rem'}} className="icon invoices-icon"></i>
+                    </Box>
+
+                    <Box sx={{ marginTop: '1rem' }}>
+                        <Box sx={authenticationActionStyle}>
+                            <Typography variant='h6'>Je n'ai pas encore de compte</Typography>
+                            <Button onClick={register} variant='contained'>Je crée un compte</Button>
+                        </Box>
+                        <Box  sx={authenticationActionStyle}>
+                            <Typography variant='h6'>J'ai déjà un compte</Typography>
+                            <Button onClick={login} variant='outlined'>Je me connecte</Button>
+                        </Box>
+                    </Box>
+                </Box>
             </Box>
             <Footer/>
         </Box>

diff --git a/frontend/app/src/resources/images/icons/png/invoices.png b/frontend/app/src/resources/images/icons/png/invoices.png
diff --git a/frontend/app/src/resources/images/icons/png/package_label.png b/frontend/app/src/resources/images/icons/png/package_label.png
diff --git a/frontend/app/src/resources/images/icons/png/secure_payment.png b/frontend/app/src/resources/images/icons/png/secure_payment.png
diff --git a/frontend/app/src/resources/images/icons/png/stock_availability.png b/frontend/app/src/resources/images/icons/png/stock_availability.png