Fusion de int-OG dans main
This commit is contained in:
sebvtl728
+5
-1
@@ -1,8 +1,12 @@
|
||||
import axios from 'axios';
|
||||
|
||||
// Création de l'instance Axios
|
||||
const api = axios.create({
|
||||
baseURL: 'https://preprod.octopusdesign.fr/api-octopus/server/wp-json',
|
||||
withCredentials: true,
|
||||
});
|
||||
|
||||
export default api;
|
||||
|
||||
|
||||
// Exportation de l'instance Axios par défaut
|
||||
export default api;
|
||||
|
||||
@@ -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;
|
||||
+30
-32
@@ -1,36 +1,46 @@
|
||||
import React,{ lazy, Suspense } from "react";
|
||||
import React, { lazy, Suspense } from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
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 SimpleReactLightbox from "simple-react-lightbox";
|
||||
|
||||
// Lazy loading des pages
|
||||
const Home = lazy(() => import('./components/pages/Home.jsx'));
|
||||
const About = lazy(() => import('./components/Pages/About'));
|
||||
const Contact = lazy(() => import('./components/Pages/Contact'));
|
||||
|
||||
// import Home from "./components/Pages/Home.jsx";
|
||||
import Post from "./components/Pages/Post";
|
||||
// import About from "./components/Pages/About";
|
||||
// import Contact from "./components/Pages/Contact";
|
||||
import Search from "./components/Pages/Search"; // Nouveau composant pour la recherche
|
||||
import Header from "./components/Header";
|
||||
import Footer from './components/Footer';
|
||||
|
||||
const Post = lazy(() => import('./components/Pages/Post'));
|
||||
const Search = lazy(() => import('./components/Pages/Search')); // Nouveau composant pour la recherche
|
||||
|
||||
// Import des services
|
||||
import ServiceUn from "./components/Pages/ServiceUn.jsx";
|
||||
import ServiceDeux from "./components/Pages/ServiceDeux.jsx";
|
||||
import ServiceTrois from "./components/Pages/ServiceTrois.jsx";
|
||||
|
||||
function App() {
|
||||
// Import des composants globaux
|
||||
import Header from "./components/Header";
|
||||
import Footer from './components/Footer';
|
||||
|
||||
function YourApp() {
|
||||
return (
|
||||
<SimpleReactLightbox>
|
||||
<YourApp />
|
||||
</SimpleReactLightbox>
|
||||
<Suspense fallback={<div>Chargement...</div>}>
|
||||
<Router>
|
||||
<Header />
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/posts" element={<Post />} />
|
||||
<Route path="/about" element={<About />} />
|
||||
<Route path="/contact" element={<Contact />} />
|
||||
<Route path="/search" element={<Search />} /> {/* Route pour les recherches */}
|
||||
{/* Routes pour les services */}
|
||||
<Route path="/services/prestation-maitrise-oeuvre" element={<ServiceUn />} />
|
||||
<Route path="/services/formation-ia" element={<ServiceDeux />} />
|
||||
<Route path="/services/formation-video" element={<ServiceTrois />} />
|
||||
</Routes>
|
||||
<Footer />
|
||||
</Router>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -38,22 +48,10 @@ ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
<React.StrictMode>
|
||||
<ThemeProvider theme={theme}>
|
||||
<HelmetProvider>
|
||||
<Router>
|
||||
<Header />
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/posts" element={<Post />} />
|
||||
<Route path="/about" element={<About />} />
|
||||
<Route path="/contact" element={<Contact />} />
|
||||
<Route path="/search" element={<Search />} /> {/* Route pour les recherches */}
|
||||
{/* Routes pour les services */}
|
||||
<Route path="/services/prestation-maitrise-oeuvre" element={<ServiceUn />} />
|
||||
<Route path="/services/formation-ia" element={<ServiceDeux />} />
|
||||
<Route path="/services/formation-video" element={<ServiceTrois />} />
|
||||
</Routes>
|
||||
<Footer />
|
||||
</Router>
|
||||
<SimpleReactLightbox>
|
||||
<YourApp />
|
||||
</SimpleReactLightbox>
|
||||
</HelmetProvider>
|
||||
</ThemeProvider>
|
||||
</React.StrictMode>
|
||||
);
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user