card Expertises modal
This commit is contained in:
sebvtl728
Generated
+6328
-75
File diff suppressed because it is too large
Load Diff
@@ -20,6 +20,9 @@
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-helmet-async": "^2.0.5",
|
||||
"react-router-dom": "^7.1.1",
|
||||
"react-simple-lightbox": "^1.0.26",
|
||||
"simple-react-lightbox": "^3.6.8",
|
||||
"svgo": "^3.3.2",
|
||||
"swiper": "^10.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import { Box, Grid, Typography, Card, CardContent } from "@mui/material";
|
||||
import React, { 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";
|
||||
@@ -13,14 +13,25 @@ const Expertices = ({
|
||||
expertise3Title,
|
||||
expertise3Text,
|
||||
}) => {
|
||||
const [openModal, setOpenModal] = useState(null);
|
||||
|
||||
const handleOpenModal = (modalId) => {
|
||||
setOpenModal(modalId);
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setOpenModal(null);
|
||||
};
|
||||
|
||||
const truncateText = (text, maxLength) => {
|
||||
const plainText = text.replace(/<[^>]+>/g, ""); // Supprime les balises HTML
|
||||
return plainText.length > maxLength
|
||||
? `${plainText.substring(0, maxLength)}...`
|
||||
: plainText;
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
py: 6,
|
||||
px: 4,
|
||||
backgroundColor: "#f9f9f9",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ py: 6, px: 4, backgroundColor: "#f9f9f9" }}>
|
||||
<Typography
|
||||
variant="h2"
|
||||
align="center"
|
||||
@@ -28,13 +39,12 @@ const Expertices = ({
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
mb: 4,
|
||||
fontSize: { xs: "2.4rem", md: "2.4rem", lg: "3rem" }, // Responsive
|
||||
fontSize: { xs: "2.4rem", md: "2.4rem", lg: "3rem" },
|
||||
}}
|
||||
>
|
||||
{expertiseTitle}
|
||||
</Typography>
|
||||
<Grid container spacing={4}>
|
||||
|
||||
{/* Expertise 1 */}
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card
|
||||
@@ -47,10 +57,9 @@ const Expertices = ({
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
|
||||
url(${pictoMaitriseOeuvre})`,
|
||||
backgroundPosition: "bottom left",
|
||||
backgroundSize: "50%",
|
||||
backgroundSize: "40%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
|
||||
backgroundPosition: "center left",
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
@@ -59,12 +68,29 @@ const Expertices = ({
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
mb: 2,
|
||||
fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
|
||||
fontSize: { xs: "2rem", md: "2rem", lg: "2rem" },
|
||||
}}
|
||||
>
|
||||
{expertise1Title}
|
||||
</Typography>
|
||||
<Typography variant="body1">{expertise1Text}</Typography>
|
||||
<Typography variant="body1">
|
||||
{truncateText(expertise1Text, 70)}
|
||||
</Typography>
|
||||
<button
|
||||
onClick={() => handleOpenModal("maitrise_oeuvre")}
|
||||
style={{
|
||||
marginTop: "16px",
|
||||
padding: "8px 16px",
|
||||
backgroundColor: "#0e467f",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
cursor: "pointer",
|
||||
textTransform: "none",
|
||||
}}
|
||||
>
|
||||
En savoir plus
|
||||
</button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
@@ -73,6 +99,7 @@ const Expertices = ({
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card
|
||||
sx={{
|
||||
backgroundPosition: "center",
|
||||
boxShadow: 3,
|
||||
padding: 2,
|
||||
textAlign: "center",
|
||||
@@ -80,9 +107,9 @@ const Expertices = ({
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
|
||||
url(${pictoStructure})`,
|
||||
backgroundPosition: "bottom left",
|
||||
backgroundSize: "50%",
|
||||
backgroundSize: "40%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: "center left",
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
@@ -91,12 +118,29 @@ const Expertices = ({
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
mb: 2,
|
||||
fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
|
||||
fontSize: { xs: "2rem", md: "2rem", lg: "2rem" },
|
||||
}}
|
||||
>
|
||||
{expertise2Title}
|
||||
</Typography>
|
||||
<Typography variant="body1">{expertise2Text}</Typography>
|
||||
<Typography variant="body1">
|
||||
{truncateText(expertise2Text, 70)}
|
||||
</Typography>
|
||||
<button
|
||||
onClick={() => handleOpenModal("structure")}
|
||||
style={{
|
||||
marginTop: "16px",
|
||||
padding: "8px 16px",
|
||||
backgroundColor: "#0e467f",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
cursor: "pointer",
|
||||
textTransform: "none",
|
||||
}}
|
||||
>
|
||||
En savoir plus
|
||||
</button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
@@ -105,16 +149,16 @@ const Expertices = ({
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card
|
||||
sx={{
|
||||
backgroundPosition: "center",
|
||||
boxShadow: 3,
|
||||
padding: 2,
|
||||
textAlign: "center",
|
||||
backgroundColor: "#fff",
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
|
||||
backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
|
||||
url(${pictoElectricite})`,
|
||||
backgroundPosition: "bottom left",
|
||||
backgroundSize: "50%",
|
||||
backgroundSize: "40%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: "center left",
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
@@ -123,16 +167,150 @@ const Expertices = ({
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
mb: 2,
|
||||
fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
|
||||
fontSize: { xs: "2rem", md: "2rem", lg: "2rem" },
|
||||
}}
|
||||
>
|
||||
{expertise3Title}
|
||||
</Typography>
|
||||
<Typography variant="body1">{expertise3Text}</Typography>
|
||||
<Typography variant="body1">
|
||||
{truncateText(expertise3Text, 70)}
|
||||
</Typography>
|
||||
<button
|
||||
onClick={() => handleOpenModal("electricite")}
|
||||
style={{
|
||||
marginTop: "16px",
|
||||
padding: "8px 16px",
|
||||
backgroundColor: "#0e467f",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
cursor: "pointer",
|
||||
textTransform: "none",
|
||||
}}
|
||||
>
|
||||
En savoir plus
|
||||
</button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</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>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -157,7 +157,7 @@ const Home = () => {
|
||||
{/* Section Désir : Témoignages */}
|
||||
<Box sx={{ py: 6, px: 4 }}>
|
||||
<Typography
|
||||
variant="h3"
|
||||
variant="h2"
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
mb: 2,
|
||||
|
||||
@@ -4,6 +4,8 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
||||
import { ThemeProvider } from "@mui/material/styles";
|
||||
import theme from "./theme";
|
||||
import { HelmetProvider } from "react-helmet-async";
|
||||
import SimpleReactLightbox from "simple-react-lightbox";
|
||||
|
||||
|
||||
|
||||
import Home from "./components/Pages/Home.jsx";
|
||||
@@ -17,6 +19,14 @@ import Header from "./components/Header";
|
||||
import FormationWeb from "./components/Pages/FormationWeb";
|
||||
import FormationIA from "./components/Pages/FormationIA";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<SimpleReactLightbox>
|
||||
<YourApp />
|
||||
</SimpleReactLightbox>
|
||||
);
|
||||
}
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
<React.StrictMode>
|
||||
<ThemeProvider theme={theme}>
|
||||
|
||||
Reference in New Issue
Block a user