sebvtl728
112 lines
3.5 KiB
React
112 lines
3.5 KiB
React
import React, { useState, useEffect } from "react";
|
|
import ServicePageTemplate from "../ServicePageTemplate";
|
|
import { getPageById } from "../../wordpress";
|
|
|
|
const ServiceCinq = () => {
|
|
const [acfData, setAcfData] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const pageId = 612; // 🔥 Remplace par l'ID réel de la page WordPress
|
|
|
|
useEffect(() => {
|
|
const fetchACFData = async () => {
|
|
try {
|
|
const pageData = await getPageById(pageId);
|
|
setAcfData(pageData.acf);
|
|
} catch (error) {
|
|
console.error("❌ Erreur récupération des champs ACF :", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchACFData();
|
|
}, []);
|
|
|
|
// ✅ Affichage du chargement en attendant les données ACF
|
|
if (loading) {
|
|
return <p>Chargement...</p>;
|
|
}
|
|
|
|
const getStoredValue = (key) =>
|
|
typeof window !== "undefined" ? window.localStorage.getItem(key) : null;
|
|
|
|
const storedHeroBackground = getStoredValue(`hero_bg_${pageId}`);
|
|
const storedHeroImage = getStoredValue(`hero_img_${pageId}`);
|
|
|
|
const heroBackground =
|
|
acfData?.hero_background ||
|
|
acfData?.background_hero ||
|
|
acfData?.hero_bg ||
|
|
storedHeroBackground ||
|
|
"linear-gradient(135deg, #050d1f 0%, #02050d 85%)";
|
|
|
|
const heroImage =
|
|
acfData?.hero_background_image ||
|
|
acfData?.hero_background_image_url ||
|
|
acfData?.hero_image_url ||
|
|
acfData?.hero_image ||
|
|
acfData?.image_hero ||
|
|
acfData?.img_hero_url ||
|
|
acfData?.img_hero ||
|
|
storedHeroImage ||
|
|
"https://picsum.photos/id/1026/1920/1080.webp";
|
|
|
|
const serviceDetails = {
|
|
// Hero
|
|
title: acfData?.titre_principal_tce || "Titre héros !", // ✅ Modifiable individuellement
|
|
subtitle:
|
|
acfData?.description_principal_tce ||
|
|
"<p>Description, héros</p>",
|
|
|
|
image: heroImage,
|
|
heroBackground,
|
|
ctaText: "En savoir plus",
|
|
ctaLink: "/contact",
|
|
|
|
// section 1
|
|
interestTitle: acfData?.second_titre_tce || "Titre interet", // ✅ Modifiable individuellement
|
|
description:
|
|
acfData?.second_description_tce || "<p>Description interet</p>",
|
|
// section 2
|
|
desirTitle: "Titre", // ✅ Modifiable individuellement
|
|
|
|
features: [
|
|
{
|
|
title: acfData?.titre_carte_one_tce || "Titre !",
|
|
description: acfData?.description_carte_one_tce || "Description.",
|
|
modalText: acfData?.description_carte_one_tce || "Description Modal.",
|
|
modalImage: "https://picsum.photos/id/300/800/400.webp",
|
|
},
|
|
{
|
|
title: acfData?.titre_carte_two_tce || "Titre !",
|
|
description: acfData?.description_carte_two_tce || "Description.",
|
|
modalText: acfData?.description_carte_two_tce || "Description Modal.",
|
|
modalImage: "https://picsum.photos/id/301/800/400.webp",
|
|
},
|
|
{
|
|
title: acfData?.titre_carte_tree || "Titre !",
|
|
description: acfData?.description_carte_tree || "Description.",
|
|
modalText: acfData?.description_carte_tree || "Description Modal.",
|
|
modalImage: "https://picsum.photos/id/302/800/400.webp",
|
|
},
|
|
],
|
|
|
|
carouselItems: [
|
|
{
|
|
title: "Portfolio Modern",
|
|
description: "Montrez vos compétences avec un portfolio unique.",
|
|
image: "https://picsum.photos/id/305/800/400.webp",
|
|
},
|
|
{
|
|
title: "Blog SEO",
|
|
description: "Optimisez vos articles pour le référencement.",
|
|
image: "https://picsum.photos/id/306/800/400.webp",
|
|
},
|
|
],
|
|
};
|
|
|
|
return <ServicePageTemplate {...serviceDetails} />;
|
|
};
|
|
|
|
export default ServiceCinq;
|