Octopusdesign/Octopus-React-Wp
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

intergration APi pour la page d'accueil

Browse Source
This commit is contained in:
sebvtl728
2025-01-05 12:13:09 +01:00
parent 8bbc9955b1
commit c4b664f667
7 changed files with 182 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Header.jsx
+1 -1
View File
@@ -141,7 +141,7 @@ const Header = () => {
>
<img
src={Logo}
alt="Logo"
alt="Bureau d'études Le Mans"
style={{
height: "40px",
width: "auto",
frontend/src/components/Hero.jsx
+1 -1
View File
@@ -31,7 +31,7 @@ const Hero = ({ backgroundImage, useGradient, title, titleColor, text, textColor
fontWeight: 'bold',
mb: 2,
color: titleColor || '#ffffff', // Couleur par défaut
fontSize: { xs: '2rem', md: '3rem', lg: '4rem' }, // Responsive
fontSize: { xs: '3rem', md: '3rem', lg: '4rem' }, // Responsive
}}
>
{title}
frontend/src/components/ModernSpinner.jsx
+47
View File
@@ -0,0 +1,47 @@
import React from "react";
import { Box, CircularProgress, Typography } from "@mui/material";
const ModernSpinner = () => {
return (
<Box
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
height: "100vh",
backgroundColor: "rgba(14, 70, 127, 0.1)",
}}
>
<CircularProgress
size={80}
thickness={4}
sx={{
color: "#0e467f",
mb: 3,
animation: "spin 2s linear infinite",
"@keyframes spin": {
"0%": {
transform: "rotate(0deg)",
},
"100%": {
transform: "rotate(360deg)",
},
},
}}
/>
<Typography
variant="h6"
sx={{
fontWeight: "bold",
color: "#0e467f",
textAlign: "center",
}}
>
Chargement des données...
</Typography>
</Box>
);
};
export default ModernSpinner;
frontend/src/components/Pages/Home.jsx
+129 -27
View File
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
import Hero from "../Hero";
import SEO from "../SEO";
import api from "../../api";
import ModernSpinner from "../ModernSpinner";
import {
Box,
Grid,
@@ -10,6 +11,7 @@ import {
Card,
CardContent,
} from "@mui/material";
import Logo from "../../assets/logo-in3-mobil.svg";
const Home = () => {
const [backgroundImage, setBackgroundImage] = useState(null);
@@ -19,26 +21,43 @@ const Home = () => {
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.");
const [metaDescription, setMetaDescription] = useState(
"Description par défaut."
);
const [canonicalUrl, setCanonicalUrl] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
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 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;
// 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 par défaut");
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");
@@ -50,6 +69,20 @@ const Home = () => {
} else {
setBackgroundImage(null);
}
// 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.");
@@ -64,6 +97,7 @@ const Home = () => {
if (isLoading) {
return (
<div style={{ textAlign: "center", padding: "50px" }}>
<ModernSpinner /> // Utilisation du spinner moderne
<p>Chargement des données...</p>
</div>
);
@@ -72,6 +106,14 @@ const Home = () => {
if (error) {
return (
<div style={{ textAlign: "center", padding: "50px" }}>
<img
src={Logo}
alt="Logo"
style={{
height: "200px",
width: "auto",
}}
/>
<p style={{ color: "red" }}>{error}</p>
</div>
);
@@ -80,7 +122,11 @@ const Home = () => {
return (
<div>
{/* SEO */}
<SEO title={metaTitle} description={metaDescription} />
<SEO
title={metaTitle}
description={metaDescription}
canonicalUrl={canonicalUrl}
/>
{/* Section Héros */}
<Hero
@@ -91,6 +137,7 @@ const Home = () => {
text={heroText}
textColor={heroTextColor}
/>
{/* <Box textAlign="center" my={4}>
<Button
variant="contained"
@@ -109,11 +156,27 @@ const Home = () => {
</Box> */}
{/* Section Intérêt : Nos Services */}
<Box sx={{ py: 6, px: 4, backgroundColor: "#f9f9f9" }}>
<Typography variant="h2" align="center" gutterBottom sx={{ fontWeight: "bold", mb: 4 }}>
Pourquoi Nous Choisir ?
<Box
sx={{
py: 6,
px: 4,
backgroundColor: "#f9f9f9",
}}
>
<Typography
variant="h2"
align="center"
gutterBottom
sx={{
fontWeight: "bold",
mb: 4,
fontSize: { xs: "2.4rem", md: "2.4rem", lg: "3rem" }, // Responsive
}}
>
{expertiseTitle}{" "}
</Typography>
<Grid container spacing={4}>
{/* Expertise 1 */}
<Grid item xs={12} md={4}>
<Card
sx={{
@@ -124,15 +187,22 @@ const Home = () => {
}}
>
<CardContent>
<Typography variant="h3" sx={{ fontWeight: "bold", mb: 2 }}>
Expertise
</Typography>
<Typography variant="body1">
Profitez de notre expertise et de nos solutions innovantes adaptées à vos besoins.
<Typography
variant="h3"
sx={{
fontWeight: "bold",
mb: 2,
fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
}}
>
{expertise1Title}{" "}
</Typography>
<Typography variant="body1">{expertise1Text} </Typography>
</CardContent>
</Card>
</Grid>
{/* Expertise 2 */}
<Grid item xs={12} md={4}>
<Card
sx={{
@@ -143,15 +213,22 @@ const Home = () => {
}}
>
<CardContent>
<Typography variant="h3" sx={{ fontWeight: "bold", mb: 2 }}>
Confiance
</Typography>
<Typography variant="body1">
Une équipe dédiée et à l'écoute pour garantir votre satisfaction.
<Typography
variant="h3"
sx={{
fontWeight: "bold",
mb: 2,
fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
}}
>
{expertise2Title}{" "}
</Typography>
<Typography variant="body1">{expertise2Text} </Typography>
</CardContent>
</Card>
</Grid>
{/* Expertise 3 */}
<Grid item xs={12} md={4}>
<Card
sx={{
@@ -162,12 +239,18 @@ const Home = () => {
}}
>
<CardContent>
<Typography variant="h3" sx={{ fontWeight: "bold", mb: 2 }}>
Résultats
</Typography>
<Typography variant="body1">
Des résultats concrets pour vos projets, avec des retours mesurables.
<Typography
variant="h3"
sx={{
fontWeight: "bold",
mb: 2,
fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
}}
>
{" "}
{expertise3Title}{" "}
</Typography>
<Typography variant="body1">{expertise3Text} </Typography>
</CardContent>
</Card>
</Grid>
@@ -176,7 +259,15 @@ const Home = () => {
{/* Section Désir : Témoignages */}
<Box sx={{ py: 6, px: 4 }}>
<Typography variant="h3" align="center" gutterBottom sx={{ fontWeight: "bold", mb: 4 }}>
<Typography
variant="h3"
sx={{
fontWeight: "bold",
mb: 2,
textAlign: "center",
fontSize: { xs: "2rem", md: "2rem", lg: "3rem" }, // Responsive
}}
>
Ce que disent nos clients
</Typography>
<Grid container spacing={4}>
@@ -192,7 +283,10 @@ const Home = () => {
<Typography variant="body1" sx={{ fontStyle: "italic" }}>
"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>
@@ -210,7 +304,10 @@ const Home = () => {
<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>
@@ -221,7 +318,12 @@ const Home = () => {
{/* Section Action */}
<Box sx={{ py: 6, px: 4, backgroundColor: "#0e467f", color: "#fff" }}>
<Typography variant="h3" 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">
@@ -245,4 +347,4 @@ const Home = () => {
);
};
export default Home;
export default Home;
frontend/src/components/Pages/Post.jsx
+1 -1
View File
@@ -20,7 +20,7 @@ const Post = () => {
<Box sx={{ padding: 4 }}>
<Typography variant="h3" sx={{ marginBottom: 4, textAlign: 'center' }}>
Liste des Articles
Nos réalisations
</Typography>
<Grid container spacing={4}>
{posts.map((post) => (
frontend/src/components/SEO.jsx
+2 -1
View File
@@ -1,12 +1,13 @@
import React from 'react';
import { Helmet } from 'react-helmet-async';
const SEO = ({ title, description }) => {
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} />}
{/* Preconnect */}
<link rel="preconnect" href="https://octopusdesign.fr" />