creat template page

2025-01-02 21:33:19 +01:00
parent 27d4a1e6a0
commit ab5763c990
9 changed files with 284 additions and 3 deletions
@@ -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>