diff --git a/frontend/index.html b/frontend/index.html index 2ab0606..cdb69b6 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,7 +4,7 @@ - + Création web diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 99700e3..19ceb35 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -17,7 +17,8 @@ "react-dom": "^18.3.1", "react-helmet": "^6.1.0", "react-helmet-async": "^2.0.5", - "react-router-dom": "^7.1.1" + "react-router-dom": "^7.1.1", + "swiper": "^10.3.1" }, "devDependencies": { "@eslint/js": "^9.17.0", @@ -6056,6 +6057,25 @@ "url": "https://opencollective.com/svgo" } }, + "node_modules/swiper": { + "version": "10.3.1", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-10.3.1.tgz", + "integrity": "sha512-24Wk3YUdZHxjc9faID97GTu6xnLNia+adMt6qMTZG/HgdSUt4fS0REsGUXJOgpTED0Amh/j+gRGQxsLayJUlBQ==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "license": "MIT", + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/turbo-stream": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index ac57fc3..d7a032c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -19,7 +19,8 @@ "react-dom": "^18.3.1", "react-helmet": "^6.1.0", "react-helmet-async": "^2.0.5", - "react-router-dom": "^7.1.1" + "react-router-dom": "^7.1.1", + "swiper": "^10.3.1" }, "devDependencies": { "@eslint/js": "^9.17.0", diff --git a/frontend/src/components/Pages/FormationIA.jsx b/frontend/src/components/Pages/FormationIA.jsx new file mode 100644 index 0000000..0e4a03b --- /dev/null +++ b/frontend/src/components/Pages/FormationIA.jsx @@ -0,0 +1,41 @@ +import React from 'react'; +import ServicePageTemplate from '../ServicePageTemplate'; + +const FormationIA = () => { + 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.' }, + { title: 'Python pour l’IA', description: 'Bibliothèques populaires : TensorFlow, PyTorch.' }, + { title: 'Projets Pratiques', description: 'Créez vos propres modèles IA.' }, + ], + image: 'https://picsum.photos/id/239/1920/1080.webp', // Remplacez par une vraie image + 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', // Remplacez par une vraie image + }, + { + title: 'Portfolio Personnel', + description: 'Montrez vos compétences avec un portfolio sur mesure.', + image: 'https://picsum.photos/id/454/800/400.webp', // Remplacez par une vraie image + }, + { + title: 'Blog Dynamique', + description: 'Créez un blog interactif et optimisé pour le SEO.', + image: 'https://picsum.photos/id/455/800/400.webp', // Remplacez par une vraie image + }, + ], + }; + + return ; +}; + +export default FormationIA; \ No newline at end of file diff --git a/frontend/src/components/Pages/FormationWeb.jsx b/frontend/src/components/Pages/FormationWeb.jsx new file mode 100644 index 0000000..5f62867 --- /dev/null +++ b/frontend/src/components/Pages/FormationWeb.jsx @@ -0,0 +1,41 @@ +import React from 'react'; +import ServicePageTemplate from '../ServicePageTemplate'; + +const FormationWeb = () => { + const serviceDetails = { + title: 'Formation Web', + subtitle: 'Apprenez à maîtriser les technologies du web.', + 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.', + features: [ + { title: 'Frontend Development', description: 'HTML, CSS, JavaScript, React et plus encore.' }, + { title: 'Backend Development', description: 'Node.js, Express, MongoDB et bases de données.' }, + { title: 'Responsive Design', description: 'Apprenez à créer des designs modernes et adaptatifs.' }, + ], + image: 'https://via.placeholder.com/1920x1080', // Remplacez par l’URL de votre image + ctaText: 'En savoir plus', + ctaLink: '/contact', + + carouselItems: [ + { + title: 'Site E-commerce', + description: 'Un projet e-commerce performant et moderne.', + image: 'https://via.placeholder.com/800x400', // Remplacez par une vraie image + }, + { + title: 'Portfolio Personnel', + description: 'Montrez vos compétences avec un portfolio sur mesure.', + image: 'https://via.placeholder.com/800x400', // Remplacez par une vraie image + }, + { + title: 'Blog Dynamique', + description: 'Créez un blog interactif et optimisé pour le SEO.', + image: 'https://via.placeholder.com/800x400', // Remplacez par une vraie image + }, + ], + }; + + return ; +}; + +export default FormationWeb; \ No newline at end of file diff --git a/frontend/src/components/ServicePageTemplate.jsx b/frontend/src/components/ServicePageTemplate.jsx new file mode 100644 index 0000000..7bd5128 --- /dev/null +++ b/frontend/src/components/ServicePageTemplate.jsx @@ -0,0 +1,166 @@ +import React from 'react'; +import { Box, Typography, Button, Grid, Card, CardContent } from '@mui/material'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import { Navigation, Pagination, Autoplay } from 'swiper/modules'; +import 'swiper/css'; +import 'swiper/css/navigation'; +import 'swiper/css/pagination'; + +const ServicePageTemplate = ({ title, subtitle, description, features, image, ctaText, ctaLink, carouselItems }) => { + return ( + + {/* Section Attention */} + + + + {title} + + + {subtitle} + + + + + + {/* Section Interest */} + + + Pourquoi choisir ce service ? + + + {description} + + + + {/* Section Desire */} + + + Ce que nous offrons + + + {features.map((feature, index) => ( + + + + + {feature.title} + + {feature.description} + + + + ))} + + + + {/* Carousel Section */} + {carouselItems && carouselItems.length > 0 && ( + + + Découvrez nos réalisations + + + {carouselItems.map((item, index) => ( + + + {item.title} + + + {item.title} + + {item.description} + + + + ))} + + + )} + + {/* Section Action */} + + + Prêt à démarrer ? + + + Rejoignez-nous dès aujourd’hui et profitez de nos services pour booster votre activité. + + + + + ); +}; + +export default ServicePageTemplate; \ No newline at end of file diff --git a/frontend/src/index.css b/frontend/src/index.css index 6119ad9..eb4bb2d 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,3 +1,5 @@ +@import 'swiper/swiper-bundle.min.css'; + :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx index 8903868..7408206 100644 --- a/frontend/src/main.jsx +++ b/frontend/src/main.jsx @@ -5,6 +5,7 @@ import { ThemeProvider } from "@mui/material/styles"; import theme from "./theme"; import { HelmetProvider } from "react-helmet-async"; + import Home from "./components/Pages/Home.jsx"; import Post from "./components/Pages/Post"; import About from "./components/Pages/About"; @@ -12,6 +13,10 @@ import Contact from "./components/Pages/Contact"; import Search from "./components/Pages/Search"; // Nouveau composant pour la recherche import Header from "./components/Header"; +// Import des services +import FormationWeb from "./components/Pages/FormationWeb"; +import FormationIA from "./components/Pages/FormationIA"; + ReactDOM.createRoot(document.getElementById("root")).render( @@ -24,6 +29,9 @@ ReactDOM.createRoot(document.getElementById("root")).render( } /> } /> } /> {/* Route pour les recherches */} + {/* Routes pour les services */} + } /> + } /> diff --git a/frontend/vite.config.js b/frontend/vite.config.js index 93f2bfc..1b62e5d 100644 --- a/frontend/vite.config.js +++ b/frontend/vite.config.js @@ -23,6 +23,7 @@ export default defineConfig({ template: 'treemap', }), ], + resolve: { alias: { '@pages': path.resolve(__dirname, './src/pages'), @@ -53,6 +54,7 @@ export default defineConfig({ cors: true, }, optimizeDeps: { + include: ['swiper/react', 'swiper/modules'], exclude: ['cssnano'], // Exclut les dépendances problématiques comme cssnano }, }); \ No newline at end of file