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

Templates des services

Browse Source
This commit is contained in:
sebvtl728
2025-01-08 21:27:24 +01:00
parent 7d2863e2d0
commit a97011c484
5 changed files with 118 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Header.jsx
+52 -75
View File
@@ -100,35 +100,16 @@ const Header = () => {
color="inherit" color="inherit"
aria-label="menu" aria-label="menu"
onClick={toggleDrawer(true)} onClick={toggleDrawer(true)}
sx={{ sx={{
display: { xs: "block", md: "none" }, display: { xs: "block", md: "none" },
color: " #ffffff" color: " #ffffff",
}} }}
> >
<MenuIcon /> <MenuIcon />
</IconButton> </IconButton>
{/* Logo as Home Link */} {/* Logo */}
{/* <Typography <Box
variant="h6"
component={Link}
to="/"
sx={{
flexGrow: 1,
textAlign: { xs: "center", md: "left" },
fontWeight: "bold",
textDecoration: "none",
color: "white",
"&:hover": {
color: "#00bcd4",
},
}}
>
Mon Site React
</Typography> */}
{/* Logo */}
<Box
component={Link} component={Link}
to="/" to="/"
sx={{ sx={{
@@ -152,7 +133,6 @@ const Header = () => {
{/* Navigation Links */} {/* Navigation Links */}
<Box sx={{ display: { xs: "none", md: "flex" }, gap: 2 }}> <Box sx={{ display: { xs: "none", md: "flex" }, gap: 2 }}>
{/* Services Dropdown */} {/* Services Dropdown */}
<Button <Button
color="inherit" color="inherit"
@@ -163,11 +143,11 @@ const Header = () => {
fontWeight: location.pathname.includes("/services") fontWeight: location.pathname.includes("/services")
? "bold" ? "bold"
: "normal", : "normal",
textDecoration: location.pathname.includes("/services") textDecoration: location.pathname.includes("/services")
? "underline" ? "underline"
: "none", : "none",
...commonButtonStyles, ...commonButtonStyles,
}} }}
> >
Services Services
</Button> </Button>
@@ -182,11 +162,11 @@ const Header = () => {
> >
<MenuItem <MenuItem
component={Link} component={Link}
to="/services/formation-web" to="/services/prestation-maitrise-oeuvre"
onClick={handleMenuClose} onClick={handleMenuClose}
> >
<WorkIcon sx={{ marginRight: 1 }} /> <WorkIcon sx={{ marginRight: 1 }} />
Formation Web Prestation maitrise oeuvre
</MenuItem> </MenuItem>
<MenuItem <MenuItem
component={Link} component={Link}
@@ -206,19 +186,19 @@ const Header = () => {
</MenuItem> </MenuItem>
</Menu> </Menu>
<Button <Button
component={Link} component={Link}
to="/posts" to="/posts"
color="inherit" color="inherit"
sx={{ sx={{
fontWeight: location.pathname === "/posts" ? "bold" : "normal", fontWeight: location.pathname === "/posts" ? "bold" : "normal",
textDecoration: textDecoration:
location.pathname === "/posts" ? "underline" : "none", location.pathname === "/posts" ? "underline" : "none",
...commonButtonStyles, ...commonButtonStyles,
}} }}
> >
Réalisations Réalisations
</Button> </Button>
<Button <Button
component={Link} component={Link}
to="/about" to="/about"
@@ -298,8 +278,6 @@ const Header = () => {
</IconButton> </IconButton>
</Box> </Box>
{/* Drawer for mobile */} {/* Drawer for mobile */}
<Drawer anchor="left" open={drawerOpen} onClose={toggleDrawer(false)}> <Drawer anchor="left" open={drawerOpen} onClose={toggleDrawer(false)}>
<Box <Box
@@ -314,24 +292,20 @@ const Header = () => {
onKeyDown={toggleDrawer(false)} onKeyDown={toggleDrawer(false)}
> >
<Box <Box
sx={{
sx={{ display: "block",
display:"block", textAlign: "center",
textAlign: "center", }}
>
<img
src={LogoM}
}} alt="Logo"
> style={{
<img height: "50px",
src={LogoM} width: "auto",
alt="Logo" }}
style={{ />
height: "50px", </Box>
width: "auto",
}}
/>
</Box>
<Typography <Typography
variant="h6" variant="h6"
sx={{ textAlign: "center", marginBottom: 2 }} sx={{ textAlign: "center", marginBottom: 2 }}
@@ -346,8 +320,9 @@ const Header = () => {
to="/" to="/"
selected={location.pathname === "/"} selected={location.pathname === "/"}
> >
<HomeIcon sx={{ <HomeIcon
marginRight: 1, sx={{
marginRight: 0.5,
}} }}
/> />
<ListItemText primary="Accueil" /> <ListItemText primary="Accueil" />
@@ -355,11 +330,11 @@ const Header = () => {
<ListItem <ListItem
button button
component={Link} component={Link}
to="/services/formation-web" to="/services/prestation-maitrise-oeuvre"
selected={location.pathname.includes("/services/formation-web")} selected={location.pathname.includes("/services/prestation-maitrise-oeuvre")}
> >
<WorkIcon sx={{ marginRight: 1 }} /> <WorkIcon sx={{ marginRight: 0.5 }} />
<ListItemText primary="Formation Web" /> <ListItemText primary="Prestation maitrise oeuvre" />
</ListItem> </ListItem>
<ListItem <ListItem
button button
@@ -367,16 +342,18 @@ const Header = () => {
to="/services/formation-ia" to="/services/formation-ia"
selected={location.pathname.includes("/services/formation-ia")} selected={location.pathname.includes("/services/formation-ia")}
> >
<WorkIcon sx={{ marginRight: 1 }} /> <WorkIcon sx={{ marginRight: 0.5 }} />
<ListItemText primary="Formation IA" /> <ListItemText primary="Formation IA" />
</ListItem> </ListItem>
<ListItem <ListItem
button button
component={Link} component={Link}
to="/services/formation-video" to="/services/formation-video"
selected={location.pathname.includes("/services/formation-video")} selected={location.pathname.includes(
"/services/formation-video"
)}
> >
<WorkIcon sx={{ marginRight: 1 }} /> <WorkIcon sx={{ marginRight: 0.5 }} />
<ListItemText primary="Formation Video" /> <ListItemText primary="Formation Video" />
</ListItem> </ListItem>
<ListItem <ListItem
@@ -385,7 +362,7 @@ const Header = () => {
to="/posts" to="/posts"
selected={location.pathname === "/posts"} selected={location.pathname === "/posts"}
> >
<ArticleIcon sx={{ marginRight: 1 }} /> <ArticleIcon sx={{ marginRight: 0.5 }} />
<ListItemText primary="Réalisations" /> <ListItemText primary="Réalisations" />
</ListItem> </ListItem>
<ListItem <ListItem
@@ -394,7 +371,7 @@ const Header = () => {
to="/about" to="/about"
selected={location.pathname === "/about"} selected={location.pathname === "/about"}
> >
<InfoIcon sx={{ marginRight: 1 }} /> <InfoIcon sx={{ marginRight: 0.5 }} />
<ListItemText primary="À propos" /> <ListItemText primary="À propos" />
</ListItem> </ListItem>
<ListItem <ListItem
@@ -403,7 +380,7 @@ const Header = () => {
to="/contact" to="/contact"
selected={location.pathname === "/contact"} selected={location.pathname === "/contact"}
> >
<ContactMailIcon sx={{ marginRight: 1 }} /> <ContactMailIcon sx={{ marginRight: 0.5 }} />
<ListItemText primary="Contact" /> <ListItemText primary="Contact" />
</ListItem> </ListItem>
</List> </List>
frontend/src/components/Pages/FormationIA.jsx → frontend/src/components/Pages/ServiceDeux.jsx
+2 -2
View File
@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import ServicePageTemplate from '../ServicePageTemplate'; import ServicePageTemplate from '../ServicePageTemplate';
const FormationIA = () => { const ServiceDeux = () => {
const serviceDetails = { const serviceDetails = {
title: 'Formation IA', title: 'Formation IA',
subtitle: 'Dominez l’intelligence artificielle.', subtitle: 'Dominez l’intelligence artificielle.',
@@ -52,4 +52,4 @@ const FormationIA = () => {
return <ServicePageTemplate {...serviceDetails} />; return <ServicePageTemplate {...serviceDetails} />;
}; };
export default FormationIA; export default ServiceDeux;
frontend/src/components/Pages/ServiceTrois.jsx
+55
View File
@@ -0,0 +1,55 @@
import React from 'react';
import ServicePageTemplate from '../ServicePageTemplate';
const ServiceTrois = () => {
const serviceDetails = {
title: 'Formation IA',
subtitle: 'Dominez l’intelligence artificielle.',
description:
'Plongez dans le futur ! Notre formation IA vous prépare aux outils modernes d’intelligence artificielle comme Python, TensorFlow et OpenAI API. Apprenez à créer des modèles IA performants.',
features: [
{
title: 'Fondamentaux de l’IA',
description: 'Concepts, algorithmes et applications.',
modalText: 'Découvrez les bases de l’IA, des algorithmes aux applications concrètes dans divers domaines.',
modalImage: 'https://picsum.photos/id/200/800/400.webp',
},
{
title: 'Python pour l’IA',
description: 'Bibliothèques populaires : TensorFlow, PyTorch.',
modalText: 'Apprenez à utiliser Python et ses bibliothèques pour concevoir des modèles d’IA puissants.',
modalImage: 'https://picsum.photos/id/201/800/400.webp',
},
{
title: 'Projets Pratiques',
description: 'Créez vos propres modèles IA.',
modalText: 'Mettez vos compétences en pratique en développant des projets IA réels.',
modalImage: 'https://picsum.photos/id/202/800/400.webp',
},
],
image: 'https://picsum.photos/id/239/1920/1080.webp',
ctaText: 'Découvrir la formation IA',
ctaLink: '/contact',
carouselItems: [
{
title: 'Site E-commerce',
description: 'Un projet e-commerce performant et moderne.',
image: 'https://picsum.photos/id/453/800/400.webp',
},
{
title: 'Portfolio Personnel',
description: 'Montrez vos compétences avec un portfolio sur mesure.',
image: 'https://picsum.photos/id/454/800/400.webp',
},
{
title: 'Blog Dynamique',
description: 'Créez un blog interactif et optimisé pour le SEO.',
image: 'https://picsum.photos/id/455/800/400.webp',
},
],
};
return <ServicePageTemplate {...serviceDetails} />;
};
export default ServiceTrois;
frontend/src/components/Pages/FormationWeb.jsx → frontend/src/components/Pages/ServiceUn.jsx
+3 -3
View File
@@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import ServicePageTemplate from '../ServicePageTemplate'; import ServicePageTemplate from '../ServicePageTemplate';
const FormationWeb = () => { const ServiceUn = () => {
const serviceDetails = { const serviceDetails = {
title: 'Formation Web', title: 'Prestation-maitrise-oeuvre',
subtitle: 'Apprenez à maîtriser les technologies du web.', subtitle: 'Apprenez à maîtriser les technologies du web.',
description: description:
'Notre formation web vous permet de développer vos compétences en développement frontend, backend et design. Rejoignez notre programme pour apprendre HTML, CSS, JavaScript et bien plus.', 'Notre formation web vous permet de développer vos compétences en développement frontend, backend et design. Rejoignez notre programme pour apprendre HTML, CSS, JavaScript et bien plus.',
@@ -47,4 +47,4 @@ const FormationWeb = () => {
return <ServicePageTemplate {...serviceDetails} />; return <ServicePageTemplate {...serviceDetails} />;
}; };
export default FormationWeb; export default ServiceUn;
frontend/src/main.jsx
+6 -4
View File
@@ -16,8 +16,9 @@ import Search from "./components/Pages/Search"; // Nouveau composant pour la rec
import Header from "./components/Header"; import Header from "./components/Header";
// Import des services // Import des services
import FormationWeb from "./components/Pages/FormationWeb"; import ServiceUn from "./components/Pages/ServiceUn.jsx";
import FormationIA from "./components/Pages/FormationIA"; import ServiceDeux from "./components/Pages/ServiceDeux.jsx";
import ServiceTrois from "./components/Pages/ServiceTrois.jsx";
function App() { function App() {
return ( return (
@@ -40,8 +41,9 @@ ReactDOM.createRoot(document.getElementById("root")).render(
<Route path="/contact" element={<Contact />} /> <Route path="/contact" element={<Contact />} />
<Route path="/search" element={<Search />} /> {/* Route pour les recherches */} <Route path="/search" element={<Search />} /> {/* Route pour les recherches */}
{/* Routes pour les services */} {/* Routes pour les services */}
<Route path="/services/formation-web" element={<FormationWeb />} /> <Route path="/services/prestation-maitrise-oeuvre" element={<ServiceUn />} />
<Route path="/services/formation-ia" element={<FormationIA />} /> <Route path="/services/formation-ia" element={<ServiceDeux />} />
<Route path="/services/formation-video" element={<ServiceTrois />} />
</Routes> </Routes>
</Router> </Router>
</HelmetProvider> </HelmetProvider>