Maj Header and add logo svg
This commit is contained in:
sebvtl728
@@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_3" data-name="Calque 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 372.1 345.53">
|
||||
<g id="Calque_1" data-name="Calque 1">
|
||||
<polyline points="315.48 135.3 358.16 181.43 306.75 228.68" style="fill: none; stroke: #d54f32; stroke-miterlimit: 10;"/>
|
||||
</g>
|
||||
<path d="M158.52,326.33l-28.91-33.06h91.41s-37.52,34.43-37.52,34.43c-7.24,6.64-18.52,6.02-24.98-1.37Z" style="fill: #d54f32;"/>
|
||||
<path d="M285.06,112.42c2.78,20.08-11.44,24.91-11.44,24.91,0,0,11.9,3.8,11.84,20.25.06,10.96,2.04,27.87-23.11,27.45-22.05-.37-20.36-24.65-20.36-24.65h11.67c0,5.59.5,9.88,3.59,13.27,3.09,3.39,16.46,6.09,16.87-13.07s-13.38-17.76-13.38-17.76v-10.98c13.27-.1,13.24-11.4,13.24-11.4,0,0,2.12-15.89-10.24-15.89s-10.42,15.89-10.42,15.89l-11.37.33c-.83-22.45,13.2-24.75,13.2-24.75,0,0,6.94-2.12,14.16-1.01l-50.33-55.66c-5.8-6.42-15.7-6.92-22.12-1.12L45.22,175.37c-6.71,6.07-7.23,16.43-1.16,23.14l61.52,68.05h144.35l96.01-86.81-60.87-67.32ZM142.56,248.84h-20.65v-114.07h20.65v114.07ZM231.05,248.84h-20.65v-90.35c-.82-4.56-2.71-7.47-5.64-8.64-5.81-2.34-14.22,2.83-18.72,6.12l-.2.15v92.72h-20.65v-114.07h20.65v10.84l.83-.75c3.33-2.96,10.42-8.37,20.61-11.38,1.61-.47,3.32-.71,5.07-.71h1.66c9.4,0,17.04,7.64,17.04,17.04v99.03Z" style="fill: #d54f32;"/>
|
||||
<g id="Calque_4" data-name="Calque 4">
|
||||
<path d="M257.59,120.12s-1.94-15.89,10.42-15.89,10.24,15.89,10.24,15.89c0,0,.03,11.3-13.24,11.4v10.98s13.79-1.4,13.38,17.76-13.78,16.46-16.87,13.07-3.59-7.68-3.59-13.27h-11.67s-1.69,24.28,20.36,24.65c25.15.42,23.17-16.49,23.11-27.45.06-16.45-11.84-20.25-11.84-20.25,0,0,15.27-5.19,11.08-27.14s-29.54-14.17-29.54-14.17c0,0-14.03,2.3-13.2,24.75l11.37-.33Z" style="fill: #525a7f;"/>
|
||||
<path d="M261.89,120.12s-1.94-15.89,10.42-15.89,10.24,15.89,10.24,15.89c0,0,.03,11.3-13.24,11.4v10.98s13.79-1.4,13.38,17.76-13.78,16.46-16.87,13.07-3.59-7.68-3.59-13.27h-11.67s-1.69,24.28,20.36,24.65c25.15.42,23.17-16.49,23.11-27.45.06-16.45-11.84-20.25-11.84-20.25,0,0,15.27-5.19,11.08-27.14s-29.54-14.17-29.54-14.17c0,0-14.03,2.3-13.2,24.75l11.37-.33Z" style="fill: #ffffff;"/>
|
||||
</g>
|
||||
<g id="texte">
|
||||
<rect x="121.45" y="96.06" width="21.31" height="21.31" style="fill:#ffffff;"/>
|
||||
<text transform="translate(24.58 175.83) rotate(-42.02) scale(.55 .77)" style="fill: #294A9A; font-family: HelveticaNeue-Bold, 'Helvetica Neue'; font-size: 33.01px; font-weight: 700; letter-spacing: .02em;"><tspan x="0" y="0">in</tspan></text>
|
||||
<text transform="translate(36.65 164.95) rotate(-42.02) scale(.52 .77)" style="fill: #294A9A; font-family: HelveticaNeue-Medium, 'Helvetica Neue'; font-size: 25px; font-weight: 500; letter-spacing: 0em;"><tspan x="0" y="0">tégrale</tspan></text>
|
||||
<text transform="translate(75.8 129.73) rotate(-42.02) scale(.55 .77)" style="fill: #294A9A; font-family: HelveticaNeue-Bold, 'Helvetica Neue'; font-size: 33.01px; font-weight: 700; letter-spacing: .02em;"><tspan x="0" y="0">in</tspan></text>
|
||||
<text transform="translate(87.87 118.85) rotate(-42.02) scale(.52 .77)" style="fill: #294A9A; font-family: HelveticaNeue-Medium, 'Helvetica Neue'; font-size: 25px; font-weight: 500; letter-spacing: 0em;"><tspan x="0" y="0">génierie</tspan></text>
|
||||
<text transform="translate(133.58 77.75) rotate(-42.11) scale(.55 .77)" style="fill: #294A9A; font-family: HelveticaNeue-Bold, 'Helvetica Neue'; font-size: 33.01px; font-weight: 700; letter-spacing: .02em;"><tspan x="0" y="0">in</tspan></text>
|
||||
<text transform="translate(145.64 66.85) rotate(-42.11) scale(.52 .77)" style="fill: #294A9A; font-family: HelveticaNeue-Medium, 'Helvetica Neue'; font-size: 25px; font-weight: 500;"><tspan x="0" y="0" style="letter-spacing: 0em;">te</tspan><tspan x="22.22" y="0" style="letter-spacing: .02em;">r</tspan><tspan x="31.47" y="0">nationale</tspan></text>
|
||||
<text transform="translate(52.94 285.9) scale(.52 .77)" style="fill: #294A9A; font-family: HelveticaNeue-Bold, 'Helvetica Neue'; font-size: 25px; font-weight: 700;"><tspan x="0" y="0" style="letter-spacing: .09em;">Bu</tspan><tspan x="36.77" y="0" style="letter-spacing: .07em;">r</tspan><tspan x="48.22" y="0" style="letter-spacing: .09em;">eau d’études & Maîtrise d’oeuv</tspan><tspan x="481.07" y="0" style="letter-spacing: .07em;">r</tspan><tspan x="492.52" y="0" style="letter-spacing: .09em;">e</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
@@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_3" data-name="Calque 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 372.1 345.53">
|
||||
<g id="Calque_1" data-name="Calque 1">
|
||||
<polyline points="315.48 135.3 358.16 181.43 306.75 228.68" style="fill: none; stroke: #d54f32; stroke-miterlimit: 10;"/>
|
||||
</g>
|
||||
<path d="M158.52,326.33l-28.91-33.06h91.41s-37.52,34.43-37.52,34.43c-7.24,6.64-18.52,6.02-24.98-1.37Z" style="fill: #d54f32;"/>
|
||||
<path d="M285.06,112.42c2.78,20.08-11.44,24.91-11.44,24.91,0,0,11.9,3.8,11.84,20.25.06,10.96,2.04,27.87-23.11,27.45-22.05-.37-20.36-24.65-20.36-24.65h11.67c0,5.59.5,9.88,3.59,13.27,3.09,3.39,16.46,6.09,16.87-13.07s-13.38-17.76-13.38-17.76v-10.98c13.27-.1,13.24-11.4,13.24-11.4,0,0,2.12-15.89-10.24-15.89s-10.42,15.89-10.42,15.89l-11.37.33c-.83-22.45,13.2-24.75,13.2-24.75,0,0,6.94-2.12,14.16-1.01l-50.33-55.66c-5.8-6.42-15.7-6.92-22.12-1.12L45.22,175.37c-6.71,6.07-7.23,16.43-1.16,23.14l61.52,68.05h144.35l96.01-86.81-60.87-67.32ZM142.56,248.84h-20.65v-114.07h20.65v114.07ZM231.05,248.84h-20.65v-90.35c-.82-4.56-2.71-7.47-5.64-8.64-5.81-2.34-14.22,2.83-18.72,6.12l-.2.15v92.72h-20.65v-114.07h20.65v10.84l.83-.75c3.33-2.96,10.42-8.37,20.61-11.38,1.61-.47,3.32-.71,5.07-.71h1.66c9.4,0,17.04,7.64,17.04,17.04v99.03Z" style="fill: #d54f32;"/>
|
||||
<g id="Calque_4" data-name="Calque 4">
|
||||
<path d="M257.59,120.12s-1.94-15.89,10.42-15.89,10.24,15.89,10.24,15.89c0,0,.03,11.3-13.24,11.4v10.98s13.79-1.4,13.38,17.76-13.78,16.46-16.87,13.07-3.59-7.68-3.59-13.27h-11.67s-1.69,24.28,20.36,24.65c25.15.42,23.17-16.49,23.11-27.45.06-16.45-11.84-20.25-11.84-20.25,0,0,15.27-5.19,11.08-27.14s-29.54-14.17-29.54-14.17c0,0-14.03,2.3-13.2,24.75l11.37-.33Z" style="fill: #525a7f;"/>
|
||||
<path d="M261.89,120.12s-1.94-15.89,10.42-15.89,10.24,15.89,10.24,15.89c0,0,.03,11.3-13.24,11.4v10.98s13.79-1.4,13.38,17.76-13.78,16.46-16.87,13.07-3.59-7.68-3.59-13.27h-11.67s-1.69,24.28,20.36,24.65c25.15.42,23.17-16.49,23.11-27.45.06-16.45-11.84-20.25-11.84-20.25,0,0,15.27-5.19,11.08-27.14s-29.54-14.17-29.54-14.17c0,0-14.03,2.3-13.2,24.75l11.37-.33Z" style="fill: #ffffff;"/>
|
||||
</g>
|
||||
<g id="texte">
|
||||
<rect x="121.45" y="96.06" width="21.31" height="21.31" style="fill:#ffffff;"/>
|
||||
<text transform="translate(24.58 175.83) rotate(-42.02) scale(.55 .77)" style="fill: #ffffff; font-family: HelveticaNeue-Bold, 'Helvetica Neue'; font-size: 33.01px; font-weight: 700; letter-spacing: .02em;"><tspan x="0" y="0">in</tspan></text>
|
||||
<text transform="translate(36.65 164.95) rotate(-42.02) scale(.52 .77)" style="fill: #ffffff; font-family: HelveticaNeue-Medium, 'Helvetica Neue'; font-size: 25px; font-weight: 500; letter-spacing: 0em;"><tspan x="0" y="0">tégrale</tspan></text>
|
||||
<text transform="translate(75.8 129.73) rotate(-42.02) scale(.55 .77)" style="fill: #ffffff; font-family: HelveticaNeue-Bold, 'Helvetica Neue'; font-size: 33.01px; font-weight: 700; letter-spacing: .02em;"><tspan x="0" y="0">in</tspan></text>
|
||||
<text transform="translate(87.87 118.85) rotate(-42.02) scale(.52 .77)" style="fill: #ffffff; font-family: HelveticaNeue-Medium, 'Helvetica Neue'; font-size: 25px; font-weight: 500; letter-spacing: 0em;"><tspan x="0" y="0">génierie</tspan></text>
|
||||
<text transform="translate(133.58 77.75) rotate(-42.11) scale(.55 .77)" style="fill: #ffffff; font-family: HelveticaNeue-Bold, 'Helvetica Neue'; font-size: 33.01px; font-weight: 700; letter-spacing: .02em;"><tspan x="0" y="0">in</tspan></text>
|
||||
<text transform="translate(145.64 66.85) rotate(-42.11) scale(.52 .77)" style="fill: #ffffff; font-family: HelveticaNeue-Medium, 'Helvetica Neue'; font-size: 25px; font-weight: 500;"><tspan x="0" y="0" style="letter-spacing: 0em;">te</tspan><tspan x="22.22" y="0" style="letter-spacing: .02em;">r</tspan><tspan x="31.47" y="0">nationale</tspan></text>
|
||||
<text transform="translate(52.94 285.9) scale(.52 .77)" style="fill: #ffffff; font-family: HelveticaNeue-Bold, 'Helvetica Neue'; font-size: 25px; font-weight: 700;"><tspan x="0" y="0" style="letter-spacing: .09em;">Bu</tspan><tspan x="36.77" y="0" style="letter-spacing: .07em;">r</tspan><tspan x="48.22" y="0" style="letter-spacing: .09em;">eau d’études & Maîtrise d’oeuv</tspan><tspan x="481.07" y="0" style="letter-spacing: .07em;">r</tspan><tspan x="492.52" y="0" style="letter-spacing: .09em;">e</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
@@ -24,6 +24,8 @@ import ArticleIcon from "@mui/icons-material/Article";
|
||||
import InfoIcon from "@mui/icons-material/Info";
|
||||
import ContactMailIcon from "@mui/icons-material/ContactMail";
|
||||
import WorkIcon from "@mui/icons-material/Work";
|
||||
import Logo from "../assets/logo-in3.svg";
|
||||
import LogoM from "../assets/logo-in3-mobil.svg";
|
||||
|
||||
const Header = () => {
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
@@ -64,7 +66,7 @@ const Header = () => {
|
||||
const commonButtonStyles = {
|
||||
transition: "color 0.3s",
|
||||
position: "relative",
|
||||
"&:hover": { color: "#00bcd4" },
|
||||
"&:hover": { color: " #00bcd4" },
|
||||
"&:after": {
|
||||
content: '""',
|
||||
position: "absolute",
|
||||
@@ -72,7 +74,7 @@ const Header = () => {
|
||||
height: "2px",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
backgroundColor: "#00bcd4",
|
||||
backgroundColor: " #00bcd4",
|
||||
transition: "width 0.3s",
|
||||
},
|
||||
"&:hover:after": {
|
||||
@@ -86,7 +88,7 @@ const Header = () => {
|
||||
color="transparent"
|
||||
elevation={0}
|
||||
sx={{
|
||||
background: "linear-gradient(to right, #0e467f, #00bcd4)",
|
||||
background: "linear-gradient(to right, #294A9A, #3158b3)",
|
||||
color: "white",
|
||||
transition: "all 0.3s ease",
|
||||
}}
|
||||
@@ -98,13 +100,16 @@ const Header = () => {
|
||||
color="inherit"
|
||||
aria-label="menu"
|
||||
onClick={toggleDrawer(true)}
|
||||
sx={{ display: { xs: "block", md: "none" } }}
|
||||
sx={{
|
||||
display: { xs: "block", md: "none" },
|
||||
color: " #ffffff"
|
||||
}}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
|
||||
{/* Logo as Home Link */}
|
||||
<Typography
|
||||
{/* <Typography
|
||||
variant="h6"
|
||||
component={Link}
|
||||
to="/"
|
||||
@@ -120,7 +125,29 @@ const Header = () => {
|
||||
}}
|
||||
>
|
||||
Mon Site React
|
||||
</Typography>
|
||||
</Typography> */}
|
||||
|
||||
{/* Logo */}
|
||||
<Box
|
||||
component={Link}
|
||||
to="/"
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
textAlign: { xs: "center", md: "left" },
|
||||
alignItems: "center",
|
||||
textDecoration: "none",
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={Logo}
|
||||
alt="Logo"
|
||||
style={{
|
||||
height: "40px",
|
||||
width: "auto",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<Box sx={{ display: { xs: "none", md: "flex" }, gap: 2 }}>
|
||||
@@ -189,7 +216,7 @@ const Header = () => {
|
||||
...commonButtonStyles,
|
||||
}}
|
||||
>
|
||||
Articles
|
||||
Réalisations
|
||||
</Button>
|
||||
<Button
|
||||
component={Link}
|
||||
@@ -253,10 +280,10 @@ const Header = () => {
|
||||
borderColor: "white",
|
||||
},
|
||||
"&:hover fieldset": {
|
||||
borderColor: "#00bcd4",
|
||||
borderColor: " #00bcd4",
|
||||
},
|
||||
"&.Mui-focused fieldset": {
|
||||
borderColor: "#00bcd4",
|
||||
borderColor: " #00bcd4",
|
||||
},
|
||||
},
|
||||
}}
|
||||
@@ -270,12 +297,14 @@ const Header = () => {
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
{/* Drawer for mobile */}
|
||||
<Drawer anchor="left" open={drawerOpen} onClose={toggleDrawer(false)}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 250,
|
||||
backgroundColor: "#f5f5f5",
|
||||
backgroundColor: " #f5f5f5",
|
||||
height: "100%",
|
||||
padding: 2,
|
||||
}}
|
||||
@@ -283,6 +312,25 @@ const Header = () => {
|
||||
onClick={toggleDrawer(false)}
|
||||
onKeyDown={toggleDrawer(false)}
|
||||
>
|
||||
<Box
|
||||
|
||||
sx={{
|
||||
display:"block",
|
||||
textAlign: "center",
|
||||
|
||||
|
||||
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={LogoM}
|
||||
alt="Logo"
|
||||
style={{
|
||||
height: "40px",
|
||||
width: "auto",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{ textAlign: "center", marginBottom: 2 }}
|
||||
@@ -297,7 +345,10 @@ const Header = () => {
|
||||
to="/"
|
||||
selected={location.pathname === "/"}
|
||||
>
|
||||
<HomeIcon sx={{ marginRight: 1 }} />
|
||||
<HomeIcon sx={{
|
||||
marginRight: 1,
|
||||
}}
|
||||
/>
|
||||
<ListItemText primary="Accueil" />
|
||||
</ListItem>
|
||||
<ListItem
|
||||
@@ -334,7 +385,7 @@ const Header = () => {
|
||||
selected={location.pathname === "/posts"}
|
||||
>
|
||||
<ArticleIcon sx={{ marginRight: 1 }} />
|
||||
<ListItemText primary="Articles" />
|
||||
<ListItemText primary="Réalisations" />
|
||||
</ListItem>
|
||||
<ListItem
|
||||
button
|
||||
|
||||
@@ -1,99 +1,248 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Hero from '../Hero';
|
||||
import SEO from '../SEO';
|
||||
import api from '../../api'; // Instance Axios configurée
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Hero from "../Hero";
|
||||
import SEO from "../SEO";
|
||||
import api from "../../api";
|
||||
import {
|
||||
Box,
|
||||
Grid,
|
||||
Typography,
|
||||
Button,
|
||||
Card,
|
||||
CardContent,
|
||||
} from "@mui/material";
|
||||
|
||||
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.');
|
||||
const [isLoading, setIsLoading] = useState(true); // État de chargement
|
||||
const [error, setError] = useState(null); // État des erreurs
|
||||
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.");
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPageData = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
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 { 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.');
|
||||
// Métadonnées SEO
|
||||
setMetaTitle(rank_math_title || "Titre par défaut");
|
||||
setMetaDescription(rank_math_description || "Description par défaut.");
|
||||
|
||||
// Données Hero
|
||||
setUseGradient(acf?.enable_gradient ?? false);
|
||||
setHeroTitle(acf?.hero_title || 'Titre par défaut');
|
||||
setHeroTitleColor(acf?.hero_title_color || '#ffffff');
|
||||
setHeroText(acf?.hero_text || 'Texte par défaut');
|
||||
setHeroTextColor(acf?.hero_text_color || '#ffffff');
|
||||
// Données Hero
|
||||
setUseGradient(acf?.enable_gradient ?? false);
|
||||
setHeroTitle(acf?.hero_title || "Titre par défaut");
|
||||
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);
|
||||
} else {
|
||||
setBackgroundImage(null);
|
||||
}
|
||||
} 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.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
// Image de fond
|
||||
if (acf?.img_hero) {
|
||||
const mediaResponse = await api.get(`wp/v2/media/${acf.img_hero}`);
|
||||
setBackgroundImage(mediaResponse.data.source_url);
|
||||
} else {
|
||||
setBackgroundImage(null);
|
||||
}
|
||||
} 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.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchPageData();
|
||||
}, []);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', padding: '50px' }}>
|
||||
<p>Chargement des données...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', padding: '50px' }}>
|
||||
<p style={{ color: 'red' }}>{error}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
fetchPageData();
|
||||
}, []);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div>
|
||||
{/* SEO */}
|
||||
<SEO title={metaTitle} description={metaDescription} />
|
||||
|
||||
{/* Hero */}
|
||||
<Hero
|
||||
backgroundImage={backgroundImage}
|
||||
useGradient={useGradient}
|
||||
title={heroTitle}
|
||||
titleColor={heroTitleColor}
|
||||
text={heroText}
|
||||
textColor={heroTextColor}
|
||||
/>
|
||||
|
||||
{/* Contenu */}
|
||||
<div style={{ padding: '20px', textAlign: 'center' }}>
|
||||
<h2>À propos de notre site</h2>
|
||||
<p>
|
||||
Bienvenue sur notre site ! Découvrez nos articles, explorez des sujets passionnants,
|
||||
et profitez d'une expérience unique. Nous sommes heureux de vous accueillir.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ textAlign: "center", padding: "50px" }}>
|
||||
<p>Chargement des données...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div style={{ textAlign: "center", padding: "50px" }}>
|
||||
<p style={{ color: "red" }}>{error}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* SEO */}
|
||||
<SEO title={metaTitle} description={metaDescription} />
|
||||
|
||||
{/* Section Héros */}
|
||||
<Hero
|
||||
backgroundImage={backgroundImage}
|
||||
useGradient={useGradient}
|
||||
title={heroTitle}
|
||||
titleColor={heroTitleColor}
|
||||
text={heroText}
|
||||
textColor={heroTextColor}
|
||||
/>
|
||||
{/* <Box textAlign="center" my={4}>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
sx={{
|
||||
backgroundColor: "#0e467f",
|
||||
color: "#fff",
|
||||
fontWeight: "bold",
|
||||
textTransform: "none",
|
||||
"&:hover": { backgroundColor: "#08508b" },
|
||||
}}
|
||||
href="/contact"
|
||||
>
|
||||
Nous Contacter
|
||||
</Button>
|
||||
</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 ?
|
||||
</Typography>
|
||||
<Grid container spacing={4}>
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: 3,
|
||||
padding: 2,
|
||||
textAlign: "center",
|
||||
backgroundColor: "#fff",
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: 3,
|
||||
padding: 2,
|
||||
textAlign: "center",
|
||||
backgroundColor: "#fff",
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: 3,
|
||||
padding: 2,
|
||||
textAlign: "center",
|
||||
backgroundColor: "#fff",
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
{/* Section Désir : Témoignages */}
|
||||
<Box sx={{ py: 6, px: 4 }}>
|
||||
<Typography variant="h3" align="center" gutterBottom sx={{ fontWeight: "bold", mb: 4 }}>
|
||||
Ce que disent nos clients
|
||||
</Typography>
|
||||
<Grid container spacing={4}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: 3,
|
||||
padding: 2,
|
||||
backgroundColor: "#f9f9f9",
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography variant="body1" sx={{ fontStyle: "italic" }}>
|
||||
"Un service exceptionnel, une équipe formidable !"
|
||||
</Typography>
|
||||
<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",
|
||||
}}
|
||||
>
|
||||
<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" }}>
|
||||
- Client 2
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
{/* Section Action */}
|
||||
<Box sx={{ py: 6, px: 4, backgroundColor: "#0e467f", color: "#fff" }}>
|
||||
<Typography variant="h3" align="center" gutterBottom sx={{ fontWeight: "bold", mb: 4 }}>
|
||||
Prêt à Commencer ?
|
||||
</Typography>
|
||||
<Box textAlign="center">
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
sx={{
|
||||
backgroundColor: "#fff",
|
||||
color: "#0e467f",
|
||||
fontWeight: "bold",
|
||||
textTransform: "none",
|
||||
"&:hover": { backgroundColor: "#e0e0e0" },
|
||||
}}
|
||||
href="/contact"
|
||||
>
|
||||
Contactez-nous dès aujourd'hui
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
Reference in New Issue
Block a user