creat template page
This commit is contained in:
sebvtl728
@@ -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;
|
||||
Reference in New Issue
Block a user