maj template page and pages
This commit is contained in:
sebvtl728
parent
555a63b61d
commit
10c1f53d91
@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect, lazy, Suspense } from "react";
|
||||
import React, { useState, useEffect, Suspense } from "react";
|
||||
import {
|
||||
Box,
|
||||
TextField,
|
||||
@ -19,7 +19,7 @@ import {
|
||||
import SEO from "../SEO";
|
||||
import api from "../../api";
|
||||
import Faq from "../Faq";
|
||||
const FAQ = lazy(() => import('../Faq'));
|
||||
|
||||
|
||||
const Contact = () => {
|
||||
const [metaTitle, setMetaTitle] = useState("Contactez-nous");
|
||||
|
||||
@ -12,8 +12,8 @@ const ServiceDeux = () => {
|
||||
ctaLink: "/contact",
|
||||
|
||||
// section 1
|
||||
interestTitle: "Béton ou Charpente : Quel Matériau Choisir pour une Construction Durable ?", // ✅ Modifiable individuellement
|
||||
description: "Le béton est le matériau de construction le plus répandu dans le monde. Il est présent dans tous les secteurs de la construction.\n Longtemps associé à l’image négative des grands ensembles, gris et vieillissants, le béton a réalisé des progrès spectaculaires ces dernières années, tant au niveau de ses performances techniques que des aspects esthétiques. Il commence même à entrer dans les foyers comme produit de décoration !<br>Une charpente est un assemblage de pièces de bois et/ou de métal, servant à soutenir ou couvrir des constructions et faisant partie de la toiture.",
|
||||
interestTitle: "Béton ou Charpente :\n Quel Matériau Choisir pour une Construction Durable ?", // ✅ Modifiable individuellement
|
||||
description: "Le béton est le matériau de construction le plus répandu dans le monde. \nIl est présent dans tous les secteurs de la construction.\n\n Longtemps associé à l’image négative des grands ensembles, gris et vieillissants, le béton a réalisé des progrès spectaculaires ces dernières années, tant au niveau de ses performances techniques que des aspects esthétiques. \n\nIl commence même à entrer dans les foyers comme produit de décoration !\nUne charpente est un assemblage de pièces de bois et/ou de métal, servant à soutenir ou couvrir des constructions et faisant partie de la toiture.",
|
||||
|
||||
// section 2
|
||||
desirTitle: "Ce que nous offrons",// ✅ Modifiable individuellement
|
||||
|
||||
@ -59,7 +59,7 @@ const ServiceTrois = () => {
|
||||
|
||||
// ✅ Métadonnées SEO
|
||||
seo: {
|
||||
metaTitle: "Formation Électricité | Expertise en ingénierie électrique",
|
||||
metaTitle: "Électricité | Expertise en ingénierie électrique",
|
||||
metaDescription: "Découvrez notre expertise en ingénierie électrique et maîtrisez l'installation et la gestion des systèmes électriques.",
|
||||
keywords: "électricité, ingénierie électrique, installation électrique, suivi de chantier",
|
||||
ogImage: "https://picsum.photos/1200/630",
|
||||
|
||||
@ -4,40 +4,44 @@ import ServicePageTemplate from "../ServicePageTemplate";
|
||||
const ServiceUn = () => {
|
||||
const serviceDetails = {
|
||||
// Hero
|
||||
title: 'Titre héros', // ✅ Modifiable individuellement
|
||||
subtitle: 'Description, héros', // ✅ Modifiable individuellement
|
||||
title:
|
||||
"Pourquoi faire appel à un \n bureau d’études pour concevoir \n ou rénover votre bâtiment ?", // ✅ Modifiable individuellement
|
||||
subtitle:
|
||||
"Notre bureau d’études in3 au Mans conçoit des bâtiments à construire ou à rénover selon le programme fourni par le maître de l’ouvrage, de diriger l’exécution des marchés de travaux, de proposer le règlement des travaux et leur réception. Nos missions sont les suivantes :", // ✅ Modifiable individuellement
|
||||
|
||||
image: "https://picsum.photos/id/1018/1920/1080.webp",
|
||||
ctaText: "En savoir plus",
|
||||
ctaLink: "/contact",
|
||||
|
||||
// section 1
|
||||
interestTitle: 'Titre interet', // ✅ Modifiable individuellement
|
||||
description: 'Description interet', // ✅ Modifiable individuellement
|
||||
interestTitle:
|
||||
"Comment le maître d’œuvre garantit-il \n la réussite de votre projet de construction ?", // ✅ Modifiable individuellement
|
||||
description:
|
||||
"Véritable bras droit du maître d’ouvrage, nous lui proposons une solution technique et esthétique qui permet de réaliser son programme, dans l’enveloppe budgétaire et les délais qui lui sont assignés. Une fois son projet validé par le maître d’ouvrage, le maître d’œuvre est responsable du bon déroulement des travaux et joue un rôle de conseil dans le choix des entreprises qui vont les réaliser. Le choix de l’entrepreneur (ou des entrepreneurs) se fait à partir d’une consultation formalisée où, sur la base d’un cahier des charges (notamment le Cahier des Clauses Techniques Particulières), le titulaire faisant l’offre la plus adaptée, est choisi par le maître d’ouvrage sur proposition du maître d’œuvre compte tenu d’éléments matériels concrets.", // ✅ Modifiable individuellement
|
||||
|
||||
// section 2
|
||||
desirTitle: 'Titre Désir', // ✅ Modifiable individuellement
|
||||
desirTitle: "Titre Désir", // ✅ Modifiable individuellement
|
||||
|
||||
features: [
|
||||
{
|
||||
title: "Frontend Development",
|
||||
description: "HTML, CSS, JavaScript, React et plus encore.",
|
||||
title: "diagnostic \n (DIA)",
|
||||
description: "Les études de diagnostic (DIA)...",
|
||||
modalText:
|
||||
"Apprenez à construire des interfaces utilisateurs modernes avec les technologies frontend.",
|
||||
"Les études de diagnostic (DIA), pour le cas de travaux sur un bâtiment existant)",
|
||||
modalImage: "https://picsum.photos/id/300/800/400.webp",
|
||||
},
|
||||
{
|
||||
title: "Backend Development",
|
||||
description: "Node.js, Express, MongoDB et bases de données.",
|
||||
title: "Les Études d’Esquisse \n (ESQ)",
|
||||
description: "Comprendre leur Importance dans un Projet Architectural",
|
||||
modalText:
|
||||
"Développez des applications robustes avec des technologies backend performantes.",
|
||||
"L’objectif principal de cette phase est de poser les bases du projet en définissant les grandes lignes de l’implantation, de l’organisation des espaces et de l’esthétique du bâtiment. Cela inclut : L’analyse du site : étude de l’environnement, des accès, de l’orientation et des contraintes liées au terrain. L’évaluation des besoins du maître d’ouvrage : prise en compte des attentes fonctionnelles et esthétiques. La proposition de plusieurs variantes : différentes approches sont étudiées pour identifier la meilleure solution. Une estimation préliminaire des coûts : pour vérifier l’adéquation entre les ambitions du projet et le budget disponible.",
|
||||
modalImage: "https://picsum.photos/id/301/800/400.webp",
|
||||
},
|
||||
{
|
||||
title: "Responsive Design",
|
||||
description: "Apprenez à créer des designs modernes et adaptatifs.",
|
||||
title: "Pourquoi réaliser une étude d’avant-projet ?",
|
||||
description: "Les Études d’Avant-Projet (AVP)...",
|
||||
modalText:
|
||||
"Maîtrisez les principes du responsive design pour des expériences utilisateur optimales.",
|
||||
"L’AVP a pour objectif de définir les grandes lignes du projet en s’appuyant sur une analyse approfondie des besoins, des contraintes et des attentes des parties prenantes. Elle permet de : Clarifier les objectifs : Identifier précisément les résultats attendus et les enjeux du projet. Évaluer la faisabilité : Étudier la viabilité technique, économique et réglementaire. Définir les solutions possibles : Comparer différentes approches et choisir la meilleure. Établir une première estimation des coûts et délais : Anticiper les ressources nécessaires et éviter les imprévus.",
|
||||
modalImage: "https://picsum.photos/id/302/800/400.webp",
|
||||
},
|
||||
],
|
||||
@ -54,6 +58,16 @@ const ServiceUn = () => {
|
||||
image: "https://picsum.photos/id/306/800/400.webp",
|
||||
},
|
||||
],
|
||||
// ✅ Métadonnées SEO
|
||||
seo: {
|
||||
metaTitle:
|
||||
"Pourquoi faire appel à un bureau d’études pour votre construction ou rénovation ? | in3",
|
||||
metaDescription:
|
||||
"Optimisez votre projet de construction ou de rénovation avec notre bureau d’études in3. Expertise, maîtrise d’œuvre et solutions adaptées pour garantir la réussite de votre chantier.",
|
||||
keywords:
|
||||
"bureau d'études, construction, rénovation, maîtrise d’œuvre, étude avant-projet, diagnostic DIA, architecture, travaux, bâtiment",
|
||||
ogImage: "https://picsum.photos/id/1018/1920/1080.webp",
|
||||
},
|
||||
};
|
||||
|
||||
return <ServicePageTemplate {...serviceDetails} />;
|
||||
|
||||
@ -59,6 +59,7 @@ const ServicePageTemplate = ({
|
||||
{/* Section Hero */}
|
||||
<Box
|
||||
sx={{
|
||||
mt:5,
|
||||
backgroundImage: `url(${image})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
@ -67,12 +68,17 @@ const ServicePageTemplate = ({
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
textAlign: "center",
|
||||
color: "white",
|
||||
color: "black",
|
||||
padding: "20px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ maxWidth: "800px" }}>
|
||||
<Typography variant="h1" sx={{ fontWeight: "bold", mb: 2, fontSize: { xs: "2rem", md: "3rem", lg: "4rem" } }}>
|
||||
<Box sx={{
|
||||
maxWidth: "800px",
|
||||
backgroundColor:"rgba(255, 255, 255, 0.39)",
|
||||
p:5,
|
||||
borderRadius:5
|
||||
}}>
|
||||
<Typography variant="h1" sx={{ fontWeight: "bold", mb: 2, fontSize: { xs: "2rem", md: "3rem", lg: "3rem",whiteSpace: "pre-line" } }}>
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ mb: 4 }}>
|
||||
@ -121,7 +127,7 @@ const ServicePageTemplate = ({
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography variant="h3" sx={{ fontWeight: "bold", mb: 2, fontSize: 26 }}>
|
||||
<Typography variant="h3" sx={{ fontWeight: "bold", mb: 2, fontSize: 26,whiteSpace: "pre-line" }}>
|
||||
{feature.title}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: "#555" }}>
|
||||
@ -152,6 +158,73 @@ const ServicePageTemplate = ({
|
||||
</Box>
|
||||
</Fade>
|
||||
</Modal>
|
||||
{/* Carousel Section */}
|
||||
{carouselItems && carouselItems.length > 0 && (
|
||||
<Box
|
||||
sx={{
|
||||
padding: "40px 20px",
|
||||
textAlign: "center",
|
||||
backgroundColor: "#f9f9f9",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h2"
|
||||
sx={{
|
||||
marginBottom: 4,
|
||||
fontSize: { xs: '2rem', md: '3rem', lg: '3rem' }, // Responsive
|
||||
|
||||
}}
|
||||
>
|
||||
Découvrez nos réalisations
|
||||
</Typography>
|
||||
|
||||
<Swiper
|
||||
modules={[Navigation, Pagination, Autoplay]}
|
||||
spaceBetween={20}
|
||||
slidesPerView={1}
|
||||
navigation
|
||||
pagination={{ clickable: true }}
|
||||
autoplay={{ delay: 3000 }}
|
||||
loop
|
||||
>
|
||||
{carouselItems.map((item, index) => (
|
||||
<SwiperSlide key={index}>
|
||||
<Card
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
padding: "20px",
|
||||
boxShadow: 3,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={item.image}
|
||||
alt={item.title}
|
||||
style={{
|
||||
width: "40%",
|
||||
height: "auto",
|
||||
objectFit: "cover",
|
||||
borderRadius: "8px",
|
||||
marginRight: "20px",
|
||||
}}
|
||||
/>
|
||||
<CardContent>
|
||||
<Typography variant="h3"
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
fontSize: { xs: '1.2rem', md: '2rem', lg: '2.5rem' }, // Responsive
|
||||
}}
|
||||
>
|
||||
{item.title}
|
||||
</Typography>
|
||||
<Typography variant="body2">{item.description}</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@ -11,75 +11,81 @@ const TestimonialSection = () => {
|
||||
padding: "50px 20px",
|
||||
}}
|
||||
>
|
||||
|
||||
{/* Image à gauche */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<Box
|
||||
component="img"
|
||||
src="https://picsum.photos/600/600.webp"
|
||||
alt="Illustration"
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "cover",
|
||||
borderRadius: { xs: "15px 15px 0 0", md: "15px 0 0 15px" },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
{/* Contenu Témoignage */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
md={6}
|
||||
{/* Image à gauche */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<Box
|
||||
component="img"
|
||||
src="https://picsum.photos/600/600.webp"
|
||||
alt="Illustration"
|
||||
sx={{
|
||||
background: "linear-gradient(to right, #002F6C, #0E467F)",
|
||||
color: "white",
|
||||
padding: "40px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "cover",
|
||||
borderRadius: { xs: "15px 15px 0 0", md: "15px 0 0 15px" },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
{/* Contenu Témoignage */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
md={6}
|
||||
sx={{
|
||||
background: "linear-gradient(to right, #002F6C, #0E467F)",
|
||||
color: "white",
|
||||
padding: "40px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
|
||||
fontWeight: "bold",
|
||||
mb: 2,
|
||||
fontStyle: "italic",
|
||||
position: "relative",
|
||||
"&::before": {
|
||||
content: '"“"',
|
||||
fontSize: "50px",
|
||||
position: "absolute",
|
||||
top: "-10px",
|
||||
left: "-5px",
|
||||
opacity: 0.3,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
mb: 2,
|
||||
fontStyle: "italic",
|
||||
position: "relative",
|
||||
"&::before": {
|
||||
content: '"“"',
|
||||
fontSize: "50px",
|
||||
position: "absolute",
|
||||
top: "-10px",
|
||||
left: "-5px",
|
||||
opacity: 0.3,
|
||||
},
|
||||
}}
|
||||
>
|
||||
In3 a transformé notre vision en réalité avec une approche
|
||||
passionnée et professionnelle.
|
||||
</Typography>
|
||||
In3 a transformé notre vision en réalité avec une approche passionnée
|
||||
et professionnelle.
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: "flex", alignItems: "center", mt: 3 }}>
|
||||
<Avatar
|
||||
alt="Marie Dupont"
|
||||
src="https://picsum.photos/100.webp"
|
||||
sx={{ width: 56, height: 56, marginRight: 2 }}
|
||||
/>
|
||||
<Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: "bold" }}>
|
||||
Marie Dupont
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
Directrice Créative chez TechVision
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center", mt: 3 }}>
|
||||
<Avatar
|
||||
alt="Marie Dupont"
|
||||
src="https://picsum.photos/100.webp"
|
||||
sx={{ width: 56, height: 56, marginRight: 2 }}
|
||||
/>
|
||||
<Box>
|
||||
<Typography
|
||||
variant="span"
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
|
||||
}}
|
||||
>
|
||||
Marie Dupont
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
Directrice Créative chez TechVision
|
||||
</Typography>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default TestimonialSection;
|
||||
export default TestimonialSection;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user