creat template page

2025-01-02 21:33:19 +01:00
parent 27d4a1e6a0
commit ab5763c990
9 changed files with 284 additions and 3 deletions
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preload" href="/assets/vendor-BFTbvl5C.js" as="script">
+    <!-- <link rel="preload" href="/src/assets/vendor-BFTbvl5C.js" as="script"> -->
    <title>Création web</title>
  </head>
  <body>
@@ -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",
@@ -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",
@@ -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 <ServicePageTemplate {...serviceDetails} />;
+};
+
+export default FormationIA;
@@ -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 <ServicePageTemplate {...serviceDetails} />;
+};
+
+export default FormationWeb;
@@ -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 (
+    <Box sx={{ backgroundColor: '#f5f5f5', color: '#333', fontFamily: 'Arial, sans-serif' }}>
+      {/* Section Attention */}
+      <Box
+        sx={{
+          backgroundImage: `url(${image})`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          minHeight: '70vh',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          textAlign: 'center',
+          color: 'white',
+          padding: '20px',
+        }}
+      >
+        <Box sx={{ maxWidth: '800px' }}>
+          <Typography variant="h1" sx={{ fontWeight: 'bold', mb: 2 }}>
+            {title}
+          </Typography>
+          <Typography variant="h6" sx={{ mb: 4 }}>
+            {subtitle}
+          </Typography>
+          <Button
+            href={ctaLink}
+            variant="contained"
+            color="secondary"
+            size="large"
+            sx={{
+              textTransform: 'none',
+              fontWeight: 'bold',
+              backgroundColor: '#0e467f',
+              '&:hover': { backgroundColor: '#00bcd4' },
+            }}
+          >
+            {ctaText}
+          </Button>
+        </Box>
+      </Box>
+
+      {/* Section Interest */}
+      <Box sx={{ padding: '40px 20px', textAlign: 'center' }}>
+        <Typography variant="h2" sx={{ fontWeight: 'bold', mb: 2 }}>
+          Pourquoi choisir ce service ?
+        </Typography>
+        <Typography variant="body1" sx={{ maxWidth: '800px', margin: '0 auto', mb: 4 }}>
+          {description}
+        </Typography>
+      </Box>
+
+      {/* Section Desire */}
+      <Box sx={{ backgroundColor: '#ffffff', padding: '40px 20px' }}>
+        <Typography variant="h3" sx={{ fontWeight: 'bold', textAlign: 'center', mb: 4 }}>
+          Ce que nous offrons
+        </Typography>
+        <Grid container spacing={4} justifyContent="center">
+          {features.map((feature, index) => (
+            <Grid item xs={12} md={4} key={index}>
+              <Card
+                sx={{
+                  boxShadow: 2,
+                  borderRadius: 2,
+                  textAlign: 'center',
+                  padding: '20px',
+                  backgroundColor: '#f9f9f9',
+                }}
+              >
+                <CardContent>
+                  <Typography variant="h6" sx={{ fontWeight: 'bold', mb: 2 }}>
+                    {feature.title}
+                  </Typography>
+                  <Typography variant="body2">{feature.description}</Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+          ))}
+        </Grid>
+      </Box>
+
+      {/* Carousel Section */}
+      {carouselItems && carouselItems.length > 0 && (
+        <Box sx={{ padding: '40px 20px', textAlign: 'center', backgroundColor: '#f9f9f9' }}>
+          <Typography variant="h4" sx={{ marginBottom: 4 }}>
+            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="h6" sx={{ fontWeight: 'bold' }}>
+                      {item.title}
+                    </Typography>
+                    <Typography variant="body2">{item.description}</Typography>
+                  </CardContent>
+                </Card>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        </Box>
+      )}
+
+      {/* Section Action */}
+      <Box
+        sx={{
+          backgroundColor: '#0e467f',
+          color: 'white',
+          textAlign: 'center',
+          padding: '40px 20px',
+        }}
+      >
+        <Typography variant="h2" sx={{ fontWeight: 'bold', mb: 2 }}>
+          Prêt à démarrer ?
+        </Typography>
+        <Typography variant="body1" sx={{ mb: 4 }}>
+          Rejoignez-nous dès aujourd’hui et profitez de nos services pour booster votre activité.
+        </Typography>
+        <Button
+          href={ctaLink}
+          variant="contained"
+          color="secondary"
+          size="large"
+          sx={{
+            textTransform: 'none',
+            fontWeight: 'bold',
+            backgroundColor: '#00bcd4',
+            '&:hover': { backgroundColor: '#0288d1' },
+          }}
+        >
+          {ctaText}
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default ServicePageTemplate;
@@ -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;
@@ -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(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
@@ -24,6 +29,9 @@ ReactDOM.createRoot(document.getElementById("root")).render(
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />
            <Route path="/search" element={<Search />} /> {/* Route pour les recherches */}
+            {/* Routes pour les services */}
+            <Route path="/services/formation-web" element={<FormationWeb />} />
+            <Route path="/services/formation-ia" element={<FormationIA />} />
          </Routes>
        </Router>
      </HelmetProvider>
@@ -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
  },
 });