first update

2025-01-02 13:39:40 +01:00
parent 32dc34afcf
commit 27d4a1e6a0
26 changed files with 7611 additions and 0 deletions
@@ -0,0 +1,71 @@
+import React from 'react';
+import { Box, Typography, Button } from '@mui/material';
+
+const Hero = ({ backgroundImage, useGradient, title, titleColor, text, textColor }) => {
+    // Priorité pour appliquer le fond : Image > Dégradé > Aucun fond
+    const backgroundStyle = backgroundImage
+        ? `url(${backgroundImage}) center/cover no-repeat`
+        : useGradient
+        ? 'linear-gradient(to bottom, #0e467f, rgb(9, 48, 87))'
+        : '#0e467f'; // Fallback couleur
+
+    return (
+        <Box
+            sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: { xs: '50vh', md: '70vh', lg: '80vh' }, // Responsive
+                background: backgroundStyle,
+                color: 'white',
+                textAlign: 'center',
+                padding: '20px',
+                transition: 'background 0.5s ease-in-out', // Transition fluide pour le fond
+            }}
+        >
+            {/* Titre */}
+            <Typography
+                variant="h1"
+                sx={{
+                    fontWeight: 'bold',
+                    mb: 2,
+                    color: titleColor || '#ffffff', // Couleur par défaut
+                    fontSize: { xs: '2rem', md: '3rem', lg: '4rem' }, // Responsive
+                }}
+            >
+                {title}
+            </Typography>
+
+            {/* Texte */}
+            <Typography
+                variant="body1"
+                sx={{
+                    mb: 4,
+                    color: textColor || '#ffffff', // Couleur par défaut
+                    fontSize: { xs: '1rem', md: '1.2rem', lg: '1.5rem' }, // Responsive
+                }}
+            >
+                {text}
+            </Typography>
+
+            {/* Bouton */}
+            <Button
+                variant="contained"
+                color="secondary"
+                size="large"
+                href="/posts"
+                sx={{
+                    textTransform: 'none',
+                    fontWeight: 'bold',
+                    padding: { xs: '10px 20px', md: '15px 30px' }, // Responsive
+                    fontSize: { xs: '0.8rem', md: '1rem' },
+                }}
+            >
+                Explorer les Articles
+            </Button>
+        </Box>
+    );
+};
+
+export default Hero;