section constructions
This commit is contained in:
sebvtl728
+2
-2
@@ -2,10 +2,10 @@
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<title>bureau d’études Maîtrise d’oeuvre</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="preload" href="/src/assets/vendor-BFTbvl5C.js" as="script">
|
||||
<title>Création web</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -0,0 +1,165 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Button,
|
||||
Grid,
|
||||
Card,
|
||||
CardContent,
|
||||
} from "@mui/material";
|
||||
|
||||
const ConstructSection = ({
|
||||
constructTitle,
|
||||
constructSubtitle,
|
||||
constructText,
|
||||
constructSector,
|
||||
constructNoteText,
|
||||
missionTitle,
|
||||
missionItems,
|
||||
}) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
py: 6,
|
||||
px: 4,
|
||||
backgroundColor: "#f9f9f9",
|
||||
}}
|
||||
>
|
||||
<Grid container spacing={4}>
|
||||
{/* Left Column */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<Box>
|
||||
{/* Titre et sous-titre */}
|
||||
<Typography
|
||||
variant="h2"
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
fontSize: { xs: "2rem", md: "2.4rem", lg: "3rem" },
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
{constructTitle}{" "}
|
||||
<Typography
|
||||
component="span"
|
||||
sx={{
|
||||
fontSize: { xs: "2rem", md: "2rem", lg: "2rem" },
|
||||
|
||||
color: "#0e467f",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
{constructSubtitle}
|
||||
</Typography>
|
||||
</Typography>
|
||||
|
||||
{/* Secteurs */}
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
mt: 2,
|
||||
fontWeight: "bold",
|
||||
color: "#0e467f",
|
||||
}}
|
||||
>
|
||||
Secteurs : {constructSector}
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
mt: 2,
|
||||
fontSize: { xs: "1rem", md: "1.2rem" },
|
||||
lineHeight: 1.6,
|
||||
color: "#666",
|
||||
}}
|
||||
dangerouslySetInnerHTML={{ __html: constructText }}
|
||||
/>
|
||||
|
||||
{/* Cadre résumé */}
|
||||
<Card
|
||||
sx={{
|
||||
mt: 4,
|
||||
backgroundColor: "#0e467f",
|
||||
color: "#fff",
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 8px 20px rgba(0, 0, 0, 0.1)",
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
fontSize: "1.1rem",
|
||||
lineHeight: 1.6,
|
||||
textAlign: "center",
|
||||
}}
|
||||
dangerouslySetInnerHTML={{ __html: constructNoteText }}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* Right Column */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 8px 20px rgba(0, 0, 0, 0.1)",
|
||||
overflow: "hidden",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
mt: 3,
|
||||
mb: 2,
|
||||
color: "#0e467f",
|
||||
}}
|
||||
>
|
||||
{missionTitle}
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
height: "400px",
|
||||
backgroundImage: `url('https://via.placeholder.com/600x400')`, // Replace with the image URL or dynamic data
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
>
|
||||
{missionItems.map((item, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: item.top,
|
||||
left: item.left,
|
||||
transform: "translate(-50%, -50%)",
|
||||
backgroundColor: "#0e467f",
|
||||
color: "#fff",
|
||||
padding: "6px 12px",
|
||||
borderRadius: "20px",
|
||||
fontSize: "0.9rem",
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConstructSection;
|
||||
@@ -4,6 +4,7 @@ import SEO from "../SEO";
|
||||
import api from "../../api";
|
||||
import ModernSpinner from "../SpinnerModerne";
|
||||
import Expertises from "../Expertises";
|
||||
import ConstructSection from "../ConstructSection";
|
||||
import {
|
||||
Box,
|
||||
Grid,
|
||||
@@ -31,8 +32,23 @@ const Home = () => {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
//Construction
|
||||
const [constructTitle, setConstructTitle] = useState("Construisons vos projets");
|
||||
const [constructSubtitle, setConstructSubtitle] = useState("ensemble");
|
||||
const [constructSector, setConstructSector] = useState("Industriel | Tertiaire | Privée");
|
||||
const [constructText, setConstructText] = useState("IN3, bureau d'études Ingénierie et Maîtrise d’œuvre, est implanté depuis 20 ans sur Le Mans. Nous étudions vos projets en structure, gros œuvre, électricité courants forts et faibles, et fluides, tout corps d'état.");
|
||||
const [constructNoteText, setConstructNoteText] = useState("À votre écoute, nous travaillons avec et pour vous dans le but de satisfaire vos besoins tant sur le plan architectural que technique, méthodologique et/ou économique.");
|
||||
const [missionTitle, setMissionTitle] = useState("Nos missions principales");
|
||||
const [missionItems, setMissionItems] = useState([
|
||||
{ label: "Diagnostics | Sécurité", top: "20%", left: "50%" },
|
||||
{ label: "Études techniques", top: "50%", left: "30%" },
|
||||
{ label: "Bureau d'études | Maîtrise d’œuvre", top: "70%", left: "60%" },
|
||||
]);
|
||||
|
||||
// ACF Expertise
|
||||
const [expertiseTitle, setExpertiseTitle] = useState("Titre Pourquoi Nous Choisir ?");
|
||||
const [expertiseTitle, setExpertiseTitle] = useState(
|
||||
"Titre Pourquoi Nous Choisir ?"
|
||||
);
|
||||
const [expertise1Title, setExpertise1Title] = useState("Titre Expertise 1");
|
||||
const [expertise1Text, setExpertise1Text] = useState("Text Expertise 1");
|
||||
const [expertise2Title, setExpertise2Title] = useState("Titre Expertise 2");
|
||||
@@ -40,7 +56,6 @@ const Home = () => {
|
||||
const [expertise3Title, setExpertise3Title] = useState("Titre Expertise 3");
|
||||
const [expertise3Text, setExpertise3Text] = useState("Text Expertise 3");
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPageData = async () => {
|
||||
try {
|
||||
@@ -74,21 +89,23 @@ const Home = () => {
|
||||
setBackgroundImage(null);
|
||||
}
|
||||
|
||||
// Section Construction
|
||||
setConstructTitle(acf?.gdc_construct.construct_title || "Construisons vos projets");
|
||||
setConstructSubtitle(acf?.gdc_construct.construct_subtitle || "ensemble");
|
||||
setConstructText(acf?.gdc_construct.construct_text || "Texte par défaut");
|
||||
setConstructSector(acf?.gdc_construct.construct_sector || "Secteurs");
|
||||
setConstructNoteText(acf?.gdc_construct.construct_note || "Note société");
|
||||
setMissionTitle(acf?.mission_title || "Nos missions principales");
|
||||
setMissionItems(acf?.mission_items || []);
|
||||
|
||||
// Récupération du titre de la deuxième section Expertise
|
||||
setExpertiseTitle(acf?.titre_expertise || "Pourquoi Nous Choisir ?");
|
||||
setExpertise1Title(acf?.gdc_expert.titre_expertise_1 || "Expertise 1");
|
||||
setExpertise1Text(
|
||||
acf?.gdc_expert.text_expertise_1 || "Text Expertise 1"
|
||||
);
|
||||
setExpertise1Text(acf?.gdc_expert.text_expertise_1 || "Text Expertise 1");
|
||||
setExpertise2Title(acf?.gdc_expert.titre_expertise_2 || "Expertise 2");
|
||||
setExpertise2Text(
|
||||
acf?.gdc_expert.text_expertise_2 || "Text Expertise 2"
|
||||
);
|
||||
setExpertise2Text(acf?.gdc_expert.text_expertise_2 || "Text Expertise 2");
|
||||
setExpertise3Title(acf?.gdc_expert.titre_expertise_3 || "Expertise 3");
|
||||
setExpertise3Text(
|
||||
acf?.gdc_expert.text_expertise_3 || "Text Expertise 3"
|
||||
);
|
||||
|
||||
setExpertise3Text(acf?.gdc_expert.text_expertise_3 || "Text Expertise 3");
|
||||
} catch (error) {
|
||||
console.error("Erreur lors de la récupération des données :", error);
|
||||
setError("Impossible de charger les données. Veuillez réessayer.");
|
||||
@@ -103,7 +120,7 @@ const Home = () => {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div style={{ textAlign: "center", padding: "50px" }}>
|
||||
<ModernSpinner /> // Utilisation du spinner moderne
|
||||
<ModernSpinner />
|
||||
<p>Chargement des données...</p>
|
||||
</div>
|
||||
);
|
||||
@@ -128,11 +145,7 @@ const Home = () => {
|
||||
return (
|
||||
<div>
|
||||
{/* SEO */}
|
||||
<SEO
|
||||
title={metaTitle}
|
||||
description={metaDescription}
|
||||
canonicalUrl={canonicalUrl}
|
||||
/>
|
||||
<SEO title={metaTitle} description={metaDescription} canonicalUrl={canonicalUrl}/>
|
||||
|
||||
{/* Section Héros */}
|
||||
<Hero
|
||||
@@ -144,6 +157,17 @@ const Home = () => {
|
||||
textColor={heroTextColor}
|
||||
/>
|
||||
|
||||
{/* Section Construisons */}
|
||||
<ConstructSection
|
||||
constructTitle={constructTitle}
|
||||
constructSubtitle={constructSubtitle}
|
||||
constructNoteText={constructNoteText}
|
||||
constructText={constructText}
|
||||
constructSector={constructSector}
|
||||
missionTitle={missionTitle}
|
||||
missionItems={missionItems}
|
||||
/>
|
||||
|
||||
<Expertises
|
||||
expertiseTitle={expertiseTitle}
|
||||
expertise1Title={expertise1Title}
|
||||
|
||||
Reference in New Issue
Block a user