Optimisation Expertises
This commit is contained in:
sebvtl728
parent
d8395f158d
commit
709221a0c1
@ -1,8 +1,78 @@
|
||||
import React, { useState } from "react";
|
||||
import { useState } from "react";
|
||||
import { Box, Grid, Typography, Card, CardContent, Modal } from "@mui/material";
|
||||
import pictoMaitriseOeuvre from "../assets/picto-maitrise-oeuvre.avif";
|
||||
import pictoStructure from "../assets/picto-structure.avif";
|
||||
import pictoElectricite from "../assets/picto-electricite.avif";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
// Style commun pour le contenu du modal
|
||||
const modalStyle = {
|
||||
padding: 4,
|
||||
borderRadius: "20px",
|
||||
background: "rgba(255, 255, 255, 0.9)",
|
||||
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
|
||||
backdropFilter: "blur(10px)",
|
||||
maxWidth: 600,
|
||||
margin: "auto",
|
||||
mt: 4,
|
||||
position: "relative",
|
||||
};
|
||||
|
||||
// Style commun pour l'icône affichée en haut à droite dans le modal
|
||||
const iconStyle = {
|
||||
position: "absolute",
|
||||
top: 16,
|
||||
right: 16,
|
||||
width: 80,
|
||||
height: 80,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
borderRadius: "50%",
|
||||
};
|
||||
|
||||
// Style commun pour les boutons "En savoir plus" et "Retour"
|
||||
const buttonStyle = {
|
||||
marginTop: "16px",
|
||||
padding: "8px 16px",
|
||||
backgroundColor: "#0e467f",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
cursor: "pointer",
|
||||
textTransform: "none",
|
||||
};
|
||||
|
||||
// Fonction pour générer le style de la carte en fonction de l'image de fond
|
||||
const cardStyle = (image) => ({
|
||||
boxShadow: 3,
|
||||
padding: 2,
|
||||
textAlign: "center",
|
||||
backgroundColor: "#fff",
|
||||
backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url(${image})`,
|
||||
backgroundSize: "40%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: "center left",
|
||||
});
|
||||
|
||||
// Composant Modal réutilisable
|
||||
const ExpertiseModal = ({ modalId, image, title, text, openModal, handleClose }) => (
|
||||
<Modal open={openModal === modalId} onClose={handleClose}>
|
||||
<Box sx={modalStyle}>
|
||||
<Box sx={{ ...iconStyle, backgroundImage: `url(${image})` }} />
|
||||
<Typography variant="h4" sx={{ mb: 2, fontWeight: "bold" }}>
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{ color: "#333", lineHeight: 1.6 }}
|
||||
dangerouslySetInnerHTML={{ __html: text }}
|
||||
/>
|
||||
<button onClick={handleClose} style={buttonStyle}>
|
||||
Retour
|
||||
</button>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
const Expertices = ({
|
||||
expertiseTitle,
|
||||
@ -15,16 +85,12 @@ const Expertices = ({
|
||||
}) => {
|
||||
const [openModal, setOpenModal] = useState(null);
|
||||
|
||||
const handleOpenModal = (modalId) => {
|
||||
setOpenModal(modalId);
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setOpenModal(null);
|
||||
};
|
||||
const handleOpenModal = (modalId) => setOpenModal(modalId);
|
||||
const handleCloseModal = () => setOpenModal(null);
|
||||
|
||||
// Fonction qui supprime les balises HTML et tronque le texte s'il est trop long
|
||||
const truncateText = (text, maxLength) => {
|
||||
const plainText = text.replace(/<[^>]+>/g, ""); // Supprime les balises HTML
|
||||
const plainText = text.replace(/<[^>]+>/g, "");
|
||||
return plainText.length > maxLength
|
||||
? `${plainText.substring(0, maxLength)}...`
|
||||
: plainText;
|
||||
@ -47,20 +113,7 @@ const Expertices = ({
|
||||
<Grid container spacing={4}>
|
||||
{/* Expertise 1 */}
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: 3,
|
||||
padding: 2,
|
||||
textAlign: "center",
|
||||
backgroundColor: "#fff",
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
|
||||
url(${pictoMaitriseOeuvre})`,
|
||||
backgroundSize: "40%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: "center left",
|
||||
}}
|
||||
>
|
||||
<Card sx={cardStyle(pictoMaitriseOeuvre)}>
|
||||
<CardContent>
|
||||
<Typography
|
||||
variant="h3"
|
||||
@ -77,16 +130,7 @@ const Expertices = ({
|
||||
</Typography>
|
||||
<button
|
||||
onClick={() => handleOpenModal("maitrise_oeuvre")}
|
||||
style={{
|
||||
marginTop: "16px",
|
||||
padding: "8px 16px",
|
||||
backgroundColor: "#0e467f",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
cursor: "pointer",
|
||||
textTransform: "none",
|
||||
}}
|
||||
style={buttonStyle}
|
||||
>
|
||||
En savoir plus
|
||||
</button>
|
||||
@ -96,20 +140,7 @@ const Expertices = ({
|
||||
|
||||
{/* Expertise 2 */}
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: 3,
|
||||
padding: 2,
|
||||
textAlign: "center",
|
||||
backgroundColor: "#fff",
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
|
||||
url(${pictoStructure})`,
|
||||
backgroundSize: "40%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: "center left",
|
||||
}}
|
||||
>
|
||||
<Card sx={cardStyle(pictoStructure)}>
|
||||
<CardContent>
|
||||
<Typography
|
||||
variant="h3"
|
||||
@ -126,16 +157,7 @@ const Expertices = ({
|
||||
</Typography>
|
||||
<button
|
||||
onClick={() => handleOpenModal("structure")}
|
||||
style={{
|
||||
marginTop: "16px",
|
||||
padding: "8px 16px",
|
||||
backgroundColor: "#0e467f",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
cursor: "pointer",
|
||||
textTransform: "none",
|
||||
}}
|
||||
style={buttonStyle}
|
||||
>
|
||||
En savoir plus
|
||||
</button>
|
||||
@ -145,19 +167,7 @@ const Expertices = ({
|
||||
|
||||
{/* Expertise 3 */}
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: 3,
|
||||
padding: 2,
|
||||
textAlign: "center",
|
||||
backgroundColor: "#fff",
|
||||
backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
|
||||
url(${pictoElectricite})`,
|
||||
backgroundSize: "40%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: "center left",
|
||||
}}
|
||||
>
|
||||
<Card sx={cardStyle(pictoElectricite)}>
|
||||
<CardContent>
|
||||
<Typography
|
||||
variant="h3"
|
||||
@ -174,16 +184,7 @@ const Expertices = ({
|
||||
</Typography>
|
||||
<button
|
||||
onClick={() => handleOpenModal("electricite")}
|
||||
style={{
|
||||
marginTop: "16px",
|
||||
padding: "8px 16px",
|
||||
backgroundColor: "#0e467f",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
cursor: "pointer",
|
||||
textTransform: "none",
|
||||
}}
|
||||
style={buttonStyle}
|
||||
>
|
||||
En savoir plus
|
||||
</button>
|
||||
@ -192,124 +193,44 @@ const Expertices = ({
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Modal 1 */}
|
||||
<Modal open={openModal === "maitrise_oeuvre"} onClose={handleCloseModal}>
|
||||
<Box
|
||||
sx={{
|
||||
padding: 4,
|
||||
borderRadius: "20px",
|
||||
background: "rgba(255, 255, 255, 0.9)",
|
||||
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
|
||||
backdropFilter: "blur(10px)",
|
||||
maxWidth: 600,
|
||||
margin: "auto",
|
||||
mt: 4,
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: 16,
|
||||
right: 16,
|
||||
width: 80,
|
||||
height: 80,
|
||||
backgroundImage: `url(${pictoMaitriseOeuvre})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
<Typography variant="h4" sx={{ mb: 2, fontWeight: "bold" }}>
|
||||
{expertise1Title}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{ color: "#333", lineHeight: 1.6 }}
|
||||
dangerouslySetInnerHTML={{ __html: expertise1Text }}
|
||||
/>
|
||||
</Box>
|
||||
</Modal>
|
||||
|
||||
{/* Modal 2 */}
|
||||
<Modal open={openModal === "structure"} onClose={handleCloseModal}>
|
||||
<Box
|
||||
sx={{
|
||||
padding: 4,
|
||||
borderRadius: "20px",
|
||||
background: "rgba(255, 255, 255, 0.9)",
|
||||
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
|
||||
backdropFilter: "blur(10px)",
|
||||
maxWidth: 600,
|
||||
margin: "auto",
|
||||
mt: 4,
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: 16,
|
||||
right: 16,
|
||||
width: 80,
|
||||
height: 80,
|
||||
backgroundImage: `url(${pictoStructure})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
<Typography variant="h4" sx={{ mb: 2, fontWeight: "bold" }}>
|
||||
{expertise2Title}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{ color: "#333", lineHeight: 1.6 }}
|
||||
dangerouslySetInnerHTML={{ __html: expertise2Text }}
|
||||
/>
|
||||
</Box>
|
||||
</Modal>
|
||||
|
||||
{/* Modal 3 */}
|
||||
<Modal open={openModal === "electricite"} onClose={handleCloseModal}>
|
||||
<Box
|
||||
sx={{
|
||||
padding: 4,
|
||||
borderRadius: "20px",
|
||||
background: "rgba(255, 255, 255, 0.9)",
|
||||
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
|
||||
backdropFilter: "blur(10px)",
|
||||
maxWidth: 600,
|
||||
margin: "auto",
|
||||
mt: 4,
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: 16,
|
||||
right: 16,
|
||||
width: 80,
|
||||
height: 80,
|
||||
backgroundImage: `url(${pictoElectricite})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
<Typography variant="h4" sx={{ mb: 2, fontWeight: "bold" }}>
|
||||
{expertise3Title}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{ color: "#333", lineHeight: 1.6 }}
|
||||
dangerouslySetInnerHTML={{ __html: expertise3Text }}
|
||||
/>
|
||||
</Box>
|
||||
</Modal>
|
||||
{/* Modaux */}
|
||||
<ExpertiseModal
|
||||
modalId="maitrise_oeuvre"
|
||||
image={pictoMaitriseOeuvre}
|
||||
title={expertise1Title}
|
||||
text={expertise1Text}
|
||||
openModal={openModal}
|
||||
handleClose={handleCloseModal}
|
||||
/>
|
||||
<ExpertiseModal
|
||||
modalId="structure"
|
||||
image={pictoStructure}
|
||||
title={expertise2Title}
|
||||
text={expertise2Text}
|
||||
openModal={openModal}
|
||||
handleClose={handleCloseModal}
|
||||
/>
|
||||
<ExpertiseModal
|
||||
modalId="electricite"
|
||||
image={pictoElectricite}
|
||||
title={expertise3Title}
|
||||
text={expertise3Text}
|
||||
openModal={openModal}
|
||||
handleClose={handleCloseModal}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
Expertices.propTypes = {
|
||||
expertiseTitle: PropTypes.string.isRequired,
|
||||
expertise1Title: PropTypes.string.isRequired,
|
||||
expertise1Text: PropTypes.string.isRequired,
|
||||
expertise2Title: PropTypes.string.isRequired,
|
||||
expertise2Text: PropTypes.string.isRequired,
|
||||
expertise3Title: PropTypes.string.isRequired,
|
||||
expertise3Text: PropTypes.string.isRequired,
|
||||
|
||||
};
|
||||
|
||||
export default Expertices;
|
||||
@ -5,7 +5,7 @@ const ServiceDeux = () => {
|
||||
const serviceDetails = {
|
||||
// Hero
|
||||
title: "Structure béton charpente métallique & bois",
|
||||
subtitle: "Dominez l’intelligence artificielle.",
|
||||
subtitle: "Solidité, Résistance, Durabilité",
|
||||
|
||||
image: "https://picsum.photos/id/240/1920/1080.webp",
|
||||
ctaText: "En savoir plus !",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user