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}
|
||||
|
||||
@@ -95,7 +95,7 @@ function register_multiple_acf_dashboard_menus() {
|
||||
// Menu principal
|
||||
add_menu_page(
|
||||
'Gestion des Champs ACF', // Titre de la page principale
|
||||
'ACF Manager', // Texte du menu
|
||||
'Page d\'accueil', // Texte du menu
|
||||
'manage_options', // Capacité requise
|
||||
'acf-manager', // Slug du menu principal
|
||||
'acf_manager_main_page', // Fonction de rappel pour la page principale
|
||||
@@ -107,17 +107,27 @@ function register_multiple_acf_dashboard_menus() {
|
||||
add_submenu_page(
|
||||
'acf-manager', // Slug du menu parent
|
||||
'Groupe 1 ACF', // Titre de la page
|
||||
'Page d\'accueil', // Texte du sous-menu
|
||||
'Section Hero', // Texte du sous-menu
|
||||
'manage_options', // Capacité requise
|
||||
'acf-manager-group-1', // Slug du sous-menu
|
||||
'acf_manager_group_1' // Fonction de rappel pour afficher le contenu
|
||||
);
|
||||
|
||||
// Sous-menu pour le Groupe 2
|
||||
add_submenu_page(
|
||||
'acf-manager',
|
||||
'Groupe 3 ACF',
|
||||
'Section Construction',
|
||||
'manage_options',
|
||||
'acf-manager-group-3',
|
||||
'acf_manager_group_3'
|
||||
);
|
||||
|
||||
// Sous-menu pour le Groupe 2
|
||||
add_submenu_page(
|
||||
'acf-manager',
|
||||
'Groupe 2 ACF',
|
||||
'section expertise',
|
||||
'Section Expertise',
|
||||
'manage_options',
|
||||
'acf-manager-group-2',
|
||||
'acf_manager_group_2'
|
||||
@@ -153,6 +163,28 @@ function acf_manager_group_1() {
|
||||
<?php
|
||||
}
|
||||
|
||||
// Groupe 3 - Champs ACF
|
||||
function acf_manager_group_3() {
|
||||
?>
|
||||
<div class="wrap">
|
||||
<h1>Groupe 3 - Champs ACF</h1>
|
||||
<?php
|
||||
if (function_exists('acf_form')) {
|
||||
acf_form_head();
|
||||
acf_form(array(
|
||||
'post_id' => '13', // Remplacez par un ID de page si nécessaire
|
||||
'field_groups' => array('group_677d3294c3dfa'),
|
||||
'form' => true,
|
||||
'return' => add_query_arg('updated', 'true', wp_get_referer()),
|
||||
'submit_value' => __('Enregistrer les modifications', 'acf'),
|
||||
));
|
||||
} else {
|
||||
echo '<p>Le plugin ACF n\'est pas activé ou disponible.</p>';
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
// Groupe 2 - Champs ACF
|
||||
function acf_manager_group_2() {
|
||||
?>
|
||||
|
||||
Reference in New Issue
Block a user