update About
This commit is contained in:
sebvtl728
@@ -15,28 +15,67 @@ 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";
|
||||
import MoneyIcon from "@mui/icons-material/Money";
|
||||
import PrintIcon from "@mui/icons-material/Print";
|
||||
import StraightenIcon from "@mui/icons-material/Straighten";
|
||||
import SettingsInputAntenna from "@mui/icons-material/SettingsInputAntenna";
|
||||
import BookIcon from "@mui/icons-material/Book";
|
||||
|
||||
const About = () => {
|
||||
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" },
|
||||
{
|
||||
icon: <BusinessIcon />,
|
||||
title: "Bureau d’études et Maitrise d’œuvre",
|
||||
link: "/services/maitrise-oeuvre",
|
||||
},
|
||||
{
|
||||
icon: <BuildIcon />,
|
||||
title: "La structure béton / métallique / bois",
|
||||
link: "/services/structure-beton-charpente-metallique-bois",
|
||||
},
|
||||
{
|
||||
icon: <FlashOnIcon />,
|
||||
title: "L’électricité",
|
||||
link: "/services/electricite",
|
||||
},
|
||||
{
|
||||
icon: <SecurityIcon />,
|
||||
title: "Sécurité incendie (SSI)",
|
||||
link: "/services/securite-incendie",
|
||||
},
|
||||
{
|
||||
icon: <EngineeringIcon />,
|
||||
title: "Expertises TCE",
|
||||
link: "/services/expertises-tce",
|
||||
},
|
||||
{
|
||||
icon: <AssessmentIcon />,
|
||||
title: "Diagnostics technique",
|
||||
link: "/services/diagnostics-technique",
|
||||
},
|
||||
];
|
||||
|
||||
const team = [
|
||||
{
|
||||
name: "Ingénieur <br> consultant Génie Civil",
|
||||
name: "Ingénieur 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",
|
||||
name: "Ingénieur Électricité",
|
||||
role: "courant Forts et Faibles, expert bâtiment TCE",
|
||||
},
|
||||
{
|
||||
name: "Technicienne spécialiste Structures",
|
||||
role: "Béton armé, TCE, DAO-CAO, dessinatrice TCE",
|
||||
},
|
||||
{ name: "Assistante de <br> gestion", role: "Comptable" },
|
||||
{
|
||||
name: "Assistante de gestion",
|
||||
role: "Comptable",
|
||||
},
|
||||
{
|
||||
name: "consultants",
|
||||
role: "spécialités tel que thermique, SSI",
|
||||
},
|
||||
];
|
||||
|
||||
const infrastructure = [
|
||||
@@ -55,20 +94,62 @@ const About = () => {
|
||||
title: "Calculs techniques",
|
||||
description: "Progiciel interne ou programme du CACT (tango, spot)",
|
||||
},
|
||||
{
|
||||
icon: <MoneyIcon />,
|
||||
title: "Logiciel de comptabilité",
|
||||
description: "EBP",
|
||||
},
|
||||
];
|
||||
|
||||
const materiel = [
|
||||
{
|
||||
icon: <ComputerIcon />,
|
||||
title: "Parc informatique",
|
||||
},
|
||||
{
|
||||
icon: <PrintIcon />,
|
||||
title: "Traceur plans",
|
||||
},
|
||||
{
|
||||
icon: <StraightenIcon />,
|
||||
title: "Pied à coulisse",
|
||||
},
|
||||
{
|
||||
icon: <SettingsInputAntenna />,
|
||||
title: "détecteurs de métaux",
|
||||
},
|
||||
{
|
||||
icon: <BookIcon />,
|
||||
title: "Bibliothèques techniques (DTU…)",
|
||||
},
|
||||
{
|
||||
icon: <BookIcon />,
|
||||
title: "Bibliothèques commerciales",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Box sx={{ padding: "40px 20px" }}>
|
||||
{/* En-tête */}
|
||||
<Typography
|
||||
variant="h2"
|
||||
sx={{ fontWeight: "bold", textAlign: "center", mb: 4 }}
|
||||
variant="h1"
|
||||
sx={{
|
||||
fontSize: { xs: "3rem", md: "3rem", lg: "3rem" },
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
mb: 4,
|
||||
}}
|
||||
>
|
||||
La société IN3
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h5"
|
||||
sx={{ textAlign: "center", mb: 6, maxWidth: "800px", mx: "auto" }}
|
||||
variant="body2"
|
||||
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
|
||||
@@ -77,8 +158,9 @@ const About = () => {
|
||||
|
||||
{/* Compétences */}
|
||||
<Typography
|
||||
variant="h3"
|
||||
variant="h2"
|
||||
sx={{
|
||||
fontSize: { xs: "2rem", md: "2rem", lg: "2rem" },
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
mb: 3,
|
||||
@@ -89,60 +171,103 @@ const About = () => {
|
||||
<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
|
||||
<a href={competence.link} style={{ textDecoration: "none" }}>
|
||||
<Card
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
textAlign: "center",
|
||||
padding: 2,
|
||||
transition: "all 0.3s ease-in-out",
|
||||
"&:hover": {
|
||||
backgroundColor: "#0e467f",
|
||||
color: "#ffffff",
|
||||
transform: "scale(1.05)",
|
||||
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>
|
||||
"&:hover svg": { fill: "#ffffff" },
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography variant="span" sx={{ mb: 1 }}>
|
||||
{competence.icon}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontSize: { xs: "1.1rem", md: "1.1rem", lg: "1.1rem" },
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
{competence.title}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</a>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
{/* Équipe */}
|
||||
{/* Équipe - Maintenant sur 2 colonnes */}
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{ fontWeight: "bold", textAlign: "center", mt: 6, mb: 3 }}
|
||||
sx={{
|
||||
background: "linear-gradient(to bottom, #0e467f, transparent)",
|
||||
}}
|
||||
>
|
||||
Notre Équipe
|
||||
<Typography
|
||||
variant="h2"
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
mt: 6,
|
||||
mb: 3,
|
||||
color: "#ffffff",
|
||||
pt: 2,
|
||||
}}
|
||||
>
|
||||
Notre Équipe
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{ textAlign: "center", mt: 1, mb: 3, color: "#ffffff", pt: 2 }}
|
||||
>
|
||||
L’équipe d’IN3 est composée de collaborateurs experts dans leurs
|
||||
domaines :
|
||||
</Typography>
|
||||
<Grid container spacing={4} justifyContent="center">
|
||||
{team.map((member, index) => (
|
||||
<Grid item xs={12} sm={6} key={index}>
|
||||
<Card
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
p: 2,
|
||||
margin: 2,
|
||||
height: "100",
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<Avatar sx={{ width: 56, height: 56, margin: "auto" }} />
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontSize: { xs: "1.1rem", md: "1.1rem", lg: "1.1rem" },
|
||||
fontWeight: "bold",
|
||||
mt: 2,
|
||||
}}
|
||||
>
|
||||
{member.name}
|
||||
</Typography>
|
||||
<Typography variant="body2">{member.role}</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</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"
|
||||
variant="h2"
|
||||
sx={{ fontWeight: "bold", textAlign: "center", mt: 6, mb: 3 }}
|
||||
>
|
||||
Notre Infrastructure
|
||||
@@ -152,10 +277,16 @@ const About = () => {
|
||||
<Grid item xs={12} sm={6} md={4} key={index}>
|
||||
<Card sx={{ textAlign: "center", padding: 2 }}>
|
||||
<CardContent>
|
||||
<Typography variant="h4" sx={{ mb: 1 }}>
|
||||
<Typography variant="span" sx={{ mb: 1 }}>
|
||||
{infra.icon}
|
||||
</Typography>
|
||||
<Typography variant="h6" sx={{ fontWeight: "bold" }}>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontSize: { xs: "1.1rem", md: "1.1rem", lg: "1.1rem" },
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
{infra.title}
|
||||
</Typography>
|
||||
<Typography variant="body2">{infra.description}</Typography>
|
||||
@@ -164,6 +295,50 @@ const About = () => {
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
background: "linear-gradient(to top, #6d6e6f, transparent)",
|
||||
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontSize: { xs: "2rem", md: "2rem", lg: "2rem" },
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
mt: 6,
|
||||
mb: 3,
|
||||
p: 2,
|
||||
}}
|
||||
>
|
||||
Nous sommes équipés de matériel de dernière génération :
|
||||
</Typography>
|
||||
<Grid container spacing={4} justifyContent="center">
|
||||
{materiel.map((infra, index) => (
|
||||
<Grid item xs={12} sm={6} md={4} key={index}>
|
||||
<Card sx={{ textAlign: "center", p: 2, margin: 2 }}>
|
||||
<CardContent>
|
||||
<Typography variant="span" sx={{ mb: 1 }}>
|
||||
{infra.icon}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontSize: { xs: "1.1rem", md: "1.1rem", lg: "1.1rem" },
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
{infra.title}
|
||||
</Typography>
|
||||
<Typography variant="body2">{infra.description}</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user