add about page
This commit is contained in:
sebvtl728
@@ -1,12 +1,171 @@
|
||||
import React from 'react';
|
||||
import React from "react";
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Grid,
|
||||
Card,
|
||||
CardContent,
|
||||
Avatar,
|
||||
} from "@mui/material";
|
||||
import BusinessIcon from "@mui/icons-material/Business";
|
||||
import BuildIcon from "@mui/icons-material/Build";
|
||||
import FlashOnIcon from "@mui/icons-material/FlashOn";
|
||||
import SecurityIcon from "@mui/icons-material/Security";
|
||||
import EngineeringIcon from "@mui/icons-material/Engineering";
|
||||
import AssessmentIcon from "@mui/icons-material/Assessment";
|
||||
import ComputerIcon from "@mui/icons-material/Computer";
|
||||
import LibraryBooksIcon from "@mui/icons-material/LibraryBooks";
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<div>
|
||||
<h1>À propos</h1>
|
||||
<p>Bienvenue sur la page À propos.</p>
|
||||
</div>
|
||||
);
|
||||
const competences = [
|
||||
{ icon: <BusinessIcon />, title: "Bureau d’études et Maitrise d’œuvre" },
|
||||
{ icon: <BuildIcon />, title: "La structure béton / métallique / bois" },
|
||||
{ icon: <FlashOnIcon />, title: "L’électricité" },
|
||||
{ icon: <SecurityIcon />, title: "Sécurité incendie (SSI)" },
|
||||
{ icon: <EngineeringIcon />, title: "Expertises TCE" },
|
||||
{ icon: <AssessmentIcon />, title: "Diagnostics technique" },
|
||||
];
|
||||
|
||||
const team = [
|
||||
{
|
||||
name: "Ingénieur <br> consultant Génie Civil",
|
||||
role: "Spécialiste Structures en béton armé, charpentes bois et métalliques",
|
||||
},
|
||||
{ name: "Ingénieur <br> Électricité", role: "Expert bâtiment TCE" },
|
||||
{
|
||||
name: "Technicienne <br> spécialiste Structures",
|
||||
role: "Béton armé, TCE, DAO-CAO, dessinatrice TCE",
|
||||
},
|
||||
{ name: "Assistante de <br> gestion", role: "Comptable" },
|
||||
];
|
||||
|
||||
const infrastructure = [
|
||||
{
|
||||
icon: <ComputerIcon />,
|
||||
title: "CAO-DAO",
|
||||
description: "Autocad & ZWCAD Pro",
|
||||
},
|
||||
{
|
||||
icon: <ComputerIcon />,
|
||||
title: "Modélisation",
|
||||
description: "Sketchup 3D",
|
||||
},
|
||||
{
|
||||
icon: <LibraryBooksIcon />,
|
||||
title: "Calculs techniques",
|
||||
description: "Progiciel interne ou programme du CACT (tango, spot)",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Box sx={{ padding: "40px 20px" }}>
|
||||
{/* En-tête */}
|
||||
<Typography
|
||||
variant="h2"
|
||||
sx={{ fontWeight: "bold", textAlign: "center", mb: 4 }}
|
||||
>
|
||||
La société IN3
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h5"
|
||||
sx={{ textAlign: "center", mb: 6, maxWidth: "800px", mx: "auto" }}
|
||||
>
|
||||
Depuis 2001, Monsieur Stéphane Seillé gère la société qu’il a créée au
|
||||
Mans (Sarthe). L’entreprise a su développer son expertise autour des
|
||||
activités du bureau d’études et de la maîtrise d’œuvre.
|
||||
</Typography>
|
||||
|
||||
{/* Compétences */}
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
Nos Compétences
|
||||
</Typography>
|
||||
<Grid container spacing={4} justifyContent="center">
|
||||
{competences.map((competence, index) => (
|
||||
<Grid item xs={12} sm={6} md={4} key={index}>
|
||||
<Card sx={{
|
||||
textAlign: "center",
|
||||
padding: 2,
|
||||
"&:hover": {
|
||||
backgroundColor: "#0e467f", // Fond bleu au hover
|
||||
color: "#ffffff", // Texte blanc au hover
|
||||
transform: "scale(1.05)", // Effet zoom léger
|
||||
boxShadow: 6,
|
||||
},
|
||||
"&:hover svg": {
|
||||
fill: "#ffffff", // Couleur blanche pour les icônes SVG au hover
|
||||
},
|
||||
}}>
|
||||
<CardContent>
|
||||
<Typography variant="h4" sx={{ mb: 1 }}>
|
||||
{competence.icon}
|
||||
</Typography>
|
||||
<Typography variant="h6" sx={{ fontWeight: "bold" }}>
|
||||
{competence.title}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
{/* Équipe */}
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{ fontWeight: "bold", textAlign: "center", mt: 6, mb: 3 }}
|
||||
>
|
||||
Notre Équipe
|
||||
</Typography>
|
||||
<Grid container spacing={4} justifyContent="center">
|
||||
{team.map((member, index) => (
|
||||
<Grid item xs={12} sm={6} md={3} key={index}>
|
||||
<Card sx={{ textAlign: "center", padding: 2 }}>
|
||||
<CardContent>
|
||||
<Avatar sx={{ width: 56, height: 56, margin: "auto" }} />
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{ fontWeight: "bold", mt: 2 }}
|
||||
dangerouslySetInnerHTML={{ __html: member.name }}
|
||||
/>
|
||||
<Typography variant="body2">{member.role}</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
{/* Infrastructure */}
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{ fontWeight: "bold", textAlign: "center", mt: 6, mb: 3 }}
|
||||
>
|
||||
Notre Infrastructure
|
||||
</Typography>
|
||||
<Grid container spacing={4} justifyContent="center">
|
||||
{infrastructure.map((infra, index) => (
|
||||
<Grid item xs={12} sm={6} md={4} key={index}>
|
||||
<Card sx={{ textAlign: "center", padding: 2 }}>
|
||||
<CardContent>
|
||||
<Typography variant="h4" sx={{ mb: 1 }}>
|
||||
{infra.icon}
|
||||
</Typography>
|
||||
<Typography variant="h6" sx={{ fontWeight: "bold" }}>
|
||||
{infra.title}
|
||||
</Typography>
|
||||
<Typography variant="body2">{infra.description}</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
export default About;
|
||||
|
||||
Reference in New Issue
Block a user