sebvtl728
73 lines
2.4 KiB
React
73 lines
2.4 KiB
React
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: '3rem', 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' },
|
|
backgroundColor: '#315397',
|
|
}}
|
|
>
|
|
Nos Formations
|
|
</Button>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default Hero; |