Fusion de int-OG dans main
This commit is contained in:
sebvtl728
@@ -5,107 +5,33 @@ import api from "../../api";
|
||||
import ModernSpinner from "../SpinnerModerne";
|
||||
import Expertises from "../Expertises";
|
||||
import ConstructSection from "../ConstructSection";
|
||||
import {
|
||||
Box,
|
||||
Grid,
|
||||
Typography,
|
||||
Button,
|
||||
Card,
|
||||
CardContent,
|
||||
} from "@mui/material";
|
||||
import { Box, Grid, Typography, Button, Card, CardContent } from "@mui/material";
|
||||
import Logo from "../../assets/logo-in3-mobil.svg";
|
||||
|
||||
const Home = () => {
|
||||
const [backgroundImage, setBackgroundImage] = useState(null);
|
||||
const [useGradient, setUseGradient] = useState(false);
|
||||
const [heroTitle, setHeroTitle] = useState("Titre par défaut");
|
||||
const [heroTitleColor, setHeroTitleColor] = useState("#ffffff");
|
||||
const [heroText, setHeroText] = useState("Texte par défaut");
|
||||
const [heroTextColor, setHeroTextColor] = useState("#ffffff");
|
||||
const [metaTitle, setMetaTitle] = useState("Titre par défaut");
|
||||
const [metaDescription, setMetaDescription] = useState(
|
||||
"Description par défaut."
|
||||
);
|
||||
|
||||
//optionally
|
||||
const [canonicalUrl, setCanonicalUrl] = useState(null);
|
||||
const [pageData, setPageData] = useState(null);
|
||||
const [heroImage, setHeroImage] = useState(null);
|
||||
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 [expertise1Title, setExpertise1Title] = useState("Titre Expertise 1");
|
||||
const [expertise1Text, setExpertise1Text] = useState("Text Expertise 1");
|
||||
const [expertise2Title, setExpertise2Title] = useState("Titre Expertise 2");
|
||||
const [expertise2Text, setExpertise2Text] = useState("Text Expertise 2");
|
||||
const [expertise3Title, setExpertise3Title] = useState("Titre Expertise 3");
|
||||
const [expertise3Text, setExpertise3Text] = useState("Text Expertise 3");
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPageData = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
const response = await api.get(
|
||||
"wp/v2/pages/13?_fields=acf,rank_math_title,rank_math_description"
|
||||
);
|
||||
const { acf, rank_math_title, rank_math_description } = response.data;
|
||||
const response = await api.get("wp/v2/pages/13?_fields=acf,rank_math_title,rank_math_description");
|
||||
const pageContent = response.data;
|
||||
setPageData(pageContent);
|
||||
|
||||
// Métadonnées SEO
|
||||
setMetaTitle(rank_math_title || "Titre par défaut");
|
||||
setMetaDescription(rank_math_description || "Description par défaut.");
|
||||
|
||||
// Récupération de l'URL canonique
|
||||
setCanonicalUrl(acf?.canonical_url || window.location.href);
|
||||
|
||||
// Données Hero
|
||||
setUseGradient(acf?.enable_gradient ?? false);
|
||||
setHeroTitle(acf?.hero_title || "Titre principal");
|
||||
setHeroTitleColor(acf?.hero_title_color || "#ffffff");
|
||||
setHeroText(acf?.hero_text || "Texte par défaut");
|
||||
setHeroTextColor(acf?.hero_text_color || "#ffffff");
|
||||
|
||||
// Image de fond
|
||||
if (acf?.img_hero) {
|
||||
const mediaResponse = await api.get(`wp/v2/media/${acf.img_hero}`);
|
||||
setBackgroundImage(mediaResponse.data.source_url);
|
||||
// Vérification et récupération de l'image Hero depuis l'API media de WordPress
|
||||
const heroImageId = pageContent.acf?.img_hero;
|
||||
if (heroImageId) {
|
||||
const mediaResponse = await api.get(`wp/v2/media/${heroImageId}`);
|
||||
setHeroImage(mediaResponse.data.source_url);
|
||||
} else {
|
||||
setBackgroundImage(null);
|
||||
setHeroImage(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");
|
||||
setExpertise2Title(acf?.gdc_expert.titre_expertise_2 || "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");
|
||||
} 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.");
|
||||
@@ -129,106 +55,82 @@ const Home = () => {
|
||||
if (error) {
|
||||
return (
|
||||
<div style={{ textAlign: "center", padding: "50px" }}>
|
||||
<img
|
||||
src={Logo}
|
||||
alt="Logo"
|
||||
style={{
|
||||
height: "200px",
|
||||
width: "auto",
|
||||
}}
|
||||
/>
|
||||
<img src={Logo} alt="Logo" style={{ height: "200px", width: "auto" }} />
|
||||
<p style={{ color: "red" }}>{error}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const { acf, rank_math_title, rank_math_description } = pageData || {};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* SEO */}
|
||||
<SEO title={metaTitle} description={metaDescription} canonicalUrl={canonicalUrl}/>
|
||||
<SEO
|
||||
postId={13} // ID WordPress valide
|
||||
defaultTitle={rank_math_title || "Accueil - Mon Site"}
|
||||
defaultDescription={rank_math_description || "Bienvenue sur notre site !"}
|
||||
defaultCanonicalUrl={acf?.canonical_url || window.location.href}
|
||||
defaultOgImage={heroImage || "https://preprod.octopusdesign.fr/api-octopus/server/wp-content/uploads/2025/01/Construction-logements-au-Mans-01.avif"}
|
||||
/>
|
||||
|
||||
{/* Section Héros */}
|
||||
<Hero
|
||||
backgroundImage={backgroundImage}
|
||||
useGradient={useGradient}
|
||||
title={heroTitle}
|
||||
titleColor={heroTitleColor}
|
||||
text={heroText}
|
||||
textColor={heroTextColor}
|
||||
backgroundImage={heroImage}
|
||||
useGradient={acf?.enable_gradient ?? false}
|
||||
title={acf?.hero_title || "Titre principal"}
|
||||
titleColor={acf?.hero_title_color || "#ffffff"}
|
||||
text={acf?.hero_text || "Texte par défaut"}
|
||||
textColor={acf?.hero_text_color || "#ffffff"}
|
||||
/>
|
||||
|
||||
{/* Section Construisons */}
|
||||
<ConstructSection
|
||||
constructTitle={constructTitle}
|
||||
constructSubtitle={constructSubtitle}
|
||||
constructNoteText={constructNoteText}
|
||||
constructText={constructText}
|
||||
constructSector={constructSector}
|
||||
missionTitle={missionTitle}
|
||||
missionItems={missionItems}
|
||||
constructTitle={acf?.gdc_construct?.construct_title || "Construisons vos projets"}
|
||||
constructSubtitle={acf?.gdc_construct?.construct_subtitle || "ensemble"}
|
||||
constructText={acf?.gdc_construct?.construct_text || "Texte par défaut"}
|
||||
constructSector={acf?.gdc_construct?.construct_sector || "Secteurs"}
|
||||
constructNoteText={acf?.gdc_construct?.construct_note || "Note société"}
|
||||
missionTitle={acf?.mission_title || "Nos missions principales"}
|
||||
missionItems={acf?.mission_items || []}
|
||||
/>
|
||||
|
||||
{/* Section Expertises */}
|
||||
<Expertises
|
||||
expertiseTitle={expertiseTitle}
|
||||
expertise1Title={expertise1Title}
|
||||
expertise1Text={expertise1Text}
|
||||
expertise2Title={expertise2Title}
|
||||
expertise2Text={expertise2Text}
|
||||
expertise3Title={expertise3Title}
|
||||
expertise3Text={expertise3Text}
|
||||
expertiseTitle={acf?.titre_expertise || "Pourquoi Nous Choisir ?"}
|
||||
expertise1Title={acf?.gdc_expert?.titre_expertise_1 || "Expertise 1"}
|
||||
expertise1Text={acf?.gdc_expert?.text_expertise_1 || "Text Expertise 1"}
|
||||
expertise2Title={acf?.gdc_expert?.titre_expertise_2 || "Expertise 2"}
|
||||
expertise2Text={acf?.gdc_expert?.text_expertise_2 || "Text Expertise 2"}
|
||||
expertise3Title={acf?.gdc_expert?.titre_expertise_3 || "Expertise 3"}
|
||||
expertise3Text={acf?.gdc_expert?.text_expertise_3 || "Text Expertise 3"}
|
||||
/>
|
||||
|
||||
{/* Section Désir : Témoignages */}
|
||||
{/* Section Témoignages */}
|
||||
<Box sx={{ py: 6, px: 4 }}>
|
||||
<Typography
|
||||
variant="h2"
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
mb: 2,
|
||||
textAlign: "center",
|
||||
fontSize: { xs: "2rem", md: "2rem", lg: "3rem" }, // Responsive
|
||||
}}
|
||||
>
|
||||
<Typography variant="h2" sx={{ fontWeight: "bold", mb: 2, textAlign: "center", fontSize: { xs: "2rem", md: "2rem", lg: "3rem" } }}>
|
||||
Ce que disent nos clients
|
||||
</Typography>
|
||||
<Grid container spacing={4}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: 3,
|
||||
padding: 2,
|
||||
backgroundColor: "#f9f9f9",
|
||||
}}
|
||||
>
|
||||
<Card sx={{ boxShadow: 3, padding: 2, backgroundColor: "#f9f9f9" }}>
|
||||
<CardContent>
|
||||
<Typography variant="body1" sx={{ fontStyle: "italic" }}>
|
||||
"Un service exceptionnel, une équipe formidable !"
|
||||
"Un service exceptionnel, une équipe formidable !"
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}
|
||||
>
|
||||
<Typography variant="body2" sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}>
|
||||
- Client 1
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: 3,
|
||||
padding: 2,
|
||||
backgroundColor: "#f9f9f9",
|
||||
}}
|
||||
>
|
||||
<Card sx={{ boxShadow: 3, padding: 2, backgroundColor: "#f9f9f9" }}>
|
||||
<CardContent>
|
||||
<Typography variant="body1" sx={{ fontStyle: "italic" }}>
|
||||
"Des résultats impressionnants pour notre projet."
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}
|
||||
>
|
||||
<Typography variant="body2" sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}>
|
||||
- Client 2
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@@ -239,12 +141,7 @@ const Home = () => {
|
||||
|
||||
{/* Section Action */}
|
||||
<Box sx={{ py: 6, px: 4, backgroundColor: "#0e467f", color: "#fff" }}>
|
||||
<Typography
|
||||
variant="h2"
|
||||
align="center"
|
||||
gutterBottom
|
||||
sx={{ fontWeight: "bold", mb: 4 }}
|
||||
>
|
||||
<Typography variant="h2" align="center" gutterBottom sx={{ fontWeight: "bold", mb: 4 }}>
|
||||
Prêt à Commencer ?
|
||||
</Typography>
|
||||
<Box textAlign="center">
|
||||
@@ -268,4 +165,4 @@ const Home = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
export default Home;
|
||||
@@ -3,6 +3,7 @@ import { Grid, Card, CardContent, CardMedia, Typography, Box } from '@mui/materi
|
||||
import api from '../../api'; // Adaptez le chemin vers l'instance Axios
|
||||
|
||||
|
||||
|
||||
const Post = () => {
|
||||
const [posts, setPosts] = useState([]);
|
||||
|
||||
|
||||
@@ -1,23 +1,73 @@
|
||||
import React from 'react';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import axios from "axios";
|
||||
|
||||
const SEO = ({ title, description, canonicalUrl }) => {
|
||||
return (
|
||||
<Helmet>
|
||||
{/* Title et Description */}
|
||||
<title>{title || 'Titre par défaut'}</title>
|
||||
<meta name="description" content={description || 'Description par défaut.'} />
|
||||
{canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
|
||||
const SEO = ({
|
||||
postId,
|
||||
defaultTitle = "Titre par défaut",
|
||||
defaultDescription = "Description par défaut",
|
||||
defaultCanonicalUrl = "",
|
||||
defaultOgImage = "https://preprod.octopusdesign.fr/api-octopus/server/wp-content/uploads/2025/01/Construction-logements-au-Mans-01.avif"
|
||||
}) => {
|
||||
|
||||
const [metaData, setMetaData] = useState({
|
||||
title: defaultTitle,
|
||||
description: defaultDescription,
|
||||
canonicalUrl: defaultCanonicalUrl,
|
||||
ogTitle: defaultTitle,
|
||||
ogDescription: defaultDescription,
|
||||
ogImage: defaultOgImage,
|
||||
});
|
||||
|
||||
{/* Preconnect */}
|
||||
<link rel="preconnect" href="https://octopusdesign.fr" />
|
||||
<link rel="preconnect" href="https://preprod.octopusdesign.fr" />
|
||||
useEffect(() => {
|
||||
if (!postId) return;
|
||||
|
||||
{/* DNS Prefetch */}
|
||||
<link rel="dns-prefetch" href="https://octopusdesign.fr" />
|
||||
<link rel="dns-prefetch" href="https://preprod.octopusdesign.fr" />
|
||||
</Helmet>
|
||||
);
|
||||
const fetchMetaData = async () => {
|
||||
try {
|
||||
const { data } = await axios.get(
|
||||
`https://preprod.octopusdesign.fr/api-octopus/server/wp-json/wp/v2/pages/${postId}`
|
||||
);
|
||||
|
||||
if (data && data.rank_math_og) {
|
||||
setMetaData((prev) => ({
|
||||
...prev,
|
||||
title: data.rank_math_og.og_title || prev.title,
|
||||
description: data.rank_math_og.og_description || prev.description,
|
||||
ogTitle: data.rank_math_og.og_title || prev.title,
|
||||
ogDescription: data.rank_math_og.og_description || prev.description,
|
||||
ogImage: data.rank_math_og.og_image || prev.ogImage,
|
||||
canonicalUrl: data.acf?.canonical_url || window.location.href
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("⚠️ Erreur lors de la récupération des métadonnées SEO :", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchMetaData();
|
||||
}, [postId]);
|
||||
|
||||
return (
|
||||
<Helmet>
|
||||
{/* SEO standard */}
|
||||
<title>{metaData.title}</title>
|
||||
<meta name="description" content={metaData.description} />
|
||||
{metaData.canonicalUrl && <link rel="canonical" href={metaData.canonicalUrl} />}
|
||||
|
||||
{/* Open Graph (Facebook, LinkedIn) */}
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content={metaData.ogTitle} />
|
||||
<meta property="og:description" content={metaData.ogDescription} />
|
||||
<meta property="og:image" content={metaData.ogImage} />
|
||||
<meta property="og:url" content={metaData.canonicalUrl} />
|
||||
|
||||
{/* Twitter Cards */}
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content={metaData.ogTitle} />
|
||||
<meta name="twitter:description" content={metaData.ogDescription} />
|
||||
<meta name="twitter:image" content={metaData.ogImage} />
|
||||
</Helmet>
|
||||
);
|
||||
};
|
||||
|
||||
export default SEO;
|
||||
Reference in New Issue
Block a user