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

creat modal template

Browse Source
This commit is contained in:
sebvtl728
2025-01-02 23:08:52 +01:00
parent ab5763c990
commit 1a82544f09
3 changed files with 235 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Pages/FormationIA.jsx
+22 -8
View File
@@ -8,29 +8,43 @@ const FormationIA = () => {
description: 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.', '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: [ features: [
{ title: 'Fondamentaux de l’IA', description: 'Concepts, algorithmes et applications.' }, {
{ title: 'Python pour l’IA', description: 'Bibliothèques populaires : TensorFlow, PyTorch.' }, title: 'Fondamentaux de l’IA',
{ title: 'Projets Pratiques', description: 'Créez vos propres modèles 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', // Remplacez par une vraie image image: 'https://picsum.photos/id/239/1920/1080.webp',
ctaText: 'Découvrir la formation IA', ctaText: 'Découvrir la formation IA',
ctaLink: '/contact', ctaLink: '/contact',
carouselItems: [ carouselItems: [
{ {
title: 'Site E-commerce', title: 'Site E-commerce',
description: 'Un projet e-commerce performant et moderne.', description: 'Un projet e-commerce performant et moderne.',
image: 'https://picsum.photos/id/453/800/400.webp', // Remplacez par une vraie image image: 'https://picsum.photos/id/453/800/400.webp',
}, },
{ {
title: 'Portfolio Personnel', title: 'Portfolio Personnel',
description: 'Montrez vos compétences avec un portfolio sur mesure.', description: 'Montrez vos compétences avec un portfolio sur mesure.',
image: 'https://picsum.photos/id/454/800/400.webp', // Remplacez par une vraie image image: 'https://picsum.photos/id/454/800/400.webp',
}, },
{ {
title: 'Blog Dynamique', title: 'Blog Dynamique',
description: 'Créez un blog interactif et optimisé pour le SEO.', 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 image: 'https://picsum.photos/id/455/800/400.webp',
}, },
], ],
}; };
frontend/src/components/Pages/FormationWeb.jsx
+25 -16
View File
@@ -8,29 +8,38 @@ const FormationWeb = () => {
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.',
features: [ 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: 'Frontend Development',
{ title: 'Responsive Design', description: 'Apprenez à créer des designs modernes et adaptatifs.' }, description: 'HTML, CSS, JavaScript, React et plus encore.',
modalText: 'Apprenez à construire des interfaces utilisateurs modernes avec les technologies frontend.',
modalImage: 'https://picsum.photos/id/300/800/400.webp',
},
{
title: 'Backend Development',
description: 'Node.js, Express, MongoDB et bases de données.',
modalText: 'Développez des applications robustes avec des technologies backend performantes.',
modalImage: 'https://picsum.photos/id/301/800/400.webp',
},
{
title: 'Responsive Design',
description: 'Apprenez à créer des designs modernes et adaptatifs.',
modalText: 'Maîtrisez les principes du responsive design pour des expériences utilisateur optimales.',
modalImage: 'https://picsum.photos/id/302/800/400.webp',
},
], ],
image: 'https://via.placeholder.com/1920x1080', // Remplacez par l’URL de votre image image: 'https://picsum.photos/id/1018/1920/1080.webp',
ctaText: 'En savoir plus', ctaText: 'En savoir plus',
ctaLink: '/contact', ctaLink: '/contact',
carouselItems: [ carouselItems: [
{ {
title: 'Site E-commerce', title: 'Portfolio Modern',
description: 'Un projet e-commerce performant et moderne.', description: 'Montrez vos compétences avec un portfolio unique.',
image: 'https://via.placeholder.com/800x400', // Remplacez par une vraie image image: 'https://picsum.photos/id/305/800/400.webp',
}, },
{ {
title: 'Portfolio Personnel', title: 'Blog SEO',
description: 'Montrez vos compétences avec un portfolio sur mesure.', description: 'Optimisez vos articles pour le référencement.',
image: 'https://via.placeholder.com/800x400', // Remplacez par une vraie image image: 'https://picsum.photos/id/306/800/400.webp',
},
{
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
}, },
], ],
}; };
frontend/src/components/ServicePageTemplate.jsx
+188 -53
View File
@@ -1,34 +1,75 @@
import React from 'react'; import React, { useState } from "react";
import { Box, Typography, Button, Grid, Card, CardContent } from '@mui/material'; import {
import { Swiper, SwiperSlide } from 'swiper/react'; Box,
import { Navigation, Pagination, Autoplay } from 'swiper/modules'; Typography,
import 'swiper/css'; Button,
import 'swiper/css/navigation'; Grid,
import 'swiper/css/pagination'; Card,
CardContent,
Modal,
Fade,
Backdrop,
} 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,
}) => {
const [openModal, setOpenModal] = useState(false);
const [modalContent, setModalContent] = useState({});
const handleCardClick = (feature) => {
setModalContent({
title: feature.title,
text: feature.modalText || "Texte non disponible.",
image: feature.modalImage || "https://picsum.photos/id/43/800/400.webp", // Image par défaut
});
setOpenModal(true);
};
const handleCloseModal = () => {
setOpenModal(false);
};
const ServicePageTemplate = ({ title, subtitle, description, features, image, ctaText, ctaLink, carouselItems }) => {
return ( return (
<Box sx={{ backgroundColor: '#f5f5f5', color: '#333', fontFamily: 'Arial, sans-serif' }}> <Box
sx={{
backgroundColor: "#f5f5f5",
color: "#333",
fontFamily: "Arial, sans-serif",
}}
>
{/* Section Attention */} {/* Section Attention */}
<Box <Box
sx={{ sx={{
backgroundImage: `url(${image})`, backgroundImage: `url(${image})`,
backgroundSize: 'cover', backgroundSize: "cover",
backgroundPosition: 'center', backgroundPosition: "center",
minHeight: '70vh', minHeight: "70vh",
display: 'flex', display: "flex",
alignItems: 'center', alignItems: "center",
justifyContent: 'center', justifyContent: "center",
textAlign: 'center', textAlign: "center",
color: 'white', color: "white",
padding: '20px', padding: "20px",
}} }}
> >
<Box sx={{ maxWidth: '800px' }}> <Box sx={{ maxWidth: "800px" }}>
<Typography variant="h1" sx={{ fontWeight: 'bold', mb: 2 }}> <Typography variant="h1" sx={{ fontWeight: "bold", mb: 2 }}>
{title} {title}
</Typography> </Typography>
<Typography variant="h6" sx={{ mb: 4 }}> <Typography variant="body1" sx={{ mb: 4 }}>
{subtitle} {subtitle}
</Typography> </Typography>
<Button <Button
@@ -37,10 +78,10 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
color="secondary" color="secondary"
size="large" size="large"
sx={{ sx={{
textTransform: 'none', textTransform: "none",
fontWeight: 'bold', fontWeight: "bold",
backgroundColor: '#0e467f', backgroundColor: "#0e467f",
'&:hover': { backgroundColor: '#00bcd4' }, "&:hover": { backgroundColor: "#00bcd4" },
}} }}
> >
{ctaText} {ctaText}
@@ -49,18 +90,24 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
</Box> </Box>
{/* Section Interest */} {/* Section Interest */}
<Box sx={{ padding: '40px 20px', textAlign: 'center' }}> <Box sx={{ padding: "40px 20px", textAlign: "center" }}>
<Typography variant="h2" sx={{ fontWeight: 'bold', mb: 2 }}> <Typography variant="h2" sx={{ fontWeight: "bold", mb: 2 }}>
Pourquoi choisir ce service ? Pourquoi choisir ce service ?
</Typography> </Typography>
<Typography variant="body1" sx={{ maxWidth: '800px', margin: '0 auto', mb: 4 }}> <Typography
variant="body1"
sx={{ maxWidth: "800px", margin: "0 auto", mb: 4 }}
>
{description} {description}
</Typography> </Typography>
</Box> </Box>
{/* Section Desire */} {/* Section Desire */}
<Box sx={{ backgroundColor: '#ffffff', padding: '40px 20px' }}> <Box sx={{ backgroundColor: "#ffffff", padding: "40px 20px" }}>
<Typography variant="h3" sx={{ fontWeight: 'bold', textAlign: 'center', mb: 4 }}> <Typography
variant="h2"
sx={{ fontWeight: "bold", textAlign: "center", mb: 4 }}
>
Ce que nous offrons Ce que nous offrons
</Typography> </Typography>
<Grid container spacing={4} justifyContent="center"> <Grid container spacing={4} justifyContent="center">
@@ -70,13 +117,23 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
sx={{ sx={{
boxShadow: 2, boxShadow: 2,
borderRadius: 2, borderRadius: 2,
textAlign: 'center', textAlign: "center",
padding: '20px', padding: "20px",
backgroundColor: '#f9f9f9', backgroundColor: "#f9f9f9",
cursor: "pointer",
transition: "transform 0.3s ease, box-shadow 0.3s ease",
"&:hover": {
transform: "scale(1.05)",
boxShadow: 5,
},
}} }}
onClick={() => handleCardClick(feature)}
> >
<CardContent> <CardContent>
<Typography variant="h6" sx={{ fontWeight: 'bold', mb: 2 }}> <Typography
variant="h3"
sx={{ fontWeight: "bold", mb: 2, fontSize: 26 }}
>
{feature.title} {feature.title}
</Typography> </Typography>
<Typography variant="body2">{feature.description}</Typography> <Typography variant="body2">{feature.description}</Typography>
@@ -87,9 +144,79 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
</Grid> </Grid>
</Box> </Box>
{/* Modal */}
<Modal
open={openModal}
onClose={handleCloseModal}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={openModal}>
<Box
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "90%",
maxWidth: "600px",
p: 4,
display: "flex",
flexDirection: "column",
alignItems: "center",
textAlign: "center",
background: "rgba(10, 41, 79, 0.21)",
boxShadow: "0 4px 30px rgba(0, 0, 0, 0.1)",
backdropFilter: "blur(10px)",
borderRadius: 2,
border: "1px solid rgba(255, 255, 255, 0.3)",
color: " #ffffff",
}}
>
<img
src={modalContent.image}
alt={modalContent.title}
style={{
width: "100%",
borderRadius: "8px",
marginBottom: "20px",
}}
/>
<Typography variant="h5" sx={{ fontWeight: "bold", mb: 2 }}>
{modalContent.title}
</Typography>
<Typography variant="body1" sx={{ mb: 4 }}>
{modalContent.text}
</Typography>
<Button
onClick={handleCloseModal}
variant="contained"
color="secondary"
sx={{
textTransform: "none",
fontWeight: "bold",
backgroundColor: "#f44336",
"&:hover": { backgroundColor: "#d32f2f" },
}}
>
Quitter
</Button>
</Box>
</Fade>
</Modal>
{/* Carousel Section */} {/* Carousel Section */}
{carouselItems && carouselItems.length > 0 && ( {carouselItems && carouselItems.length > 0 && (
<Box sx={{ padding: '40px 20px', textAlign: 'center', backgroundColor: '#f9f9f9' }}> <Box
sx={{
padding: "40px 20px",
textAlign: "center",
backgroundColor: "#f9f9f9",
}}
>
<Typography variant="h4" sx={{ marginBottom: 4 }}> <Typography variant="h4" sx={{ marginBottom: 4 }}>
Découvrez nos réalisations Découvrez nos réalisations
</Typography> </Typography>
@@ -104,20 +231,27 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
> >
{carouselItems.map((item, index) => ( {carouselItems.map((item, index) => (
<SwiperSlide key={index}> <SwiperSlide key={index}>
<Card sx={{ display: 'flex', alignItems: 'center', padding: '20px', boxShadow: 3 }}> <Card
sx={{
display: "flex",
alignItems: "center",
padding: "20px",
boxShadow: 3,
}}
>
<img <img
src={item.image} src={item.image}
alt={item.title} alt={item.title}
style={{ style={{
width: '40%', width: "40%",
height: 'auto', height: "auto",
objectFit: 'cover', objectFit: "cover",
borderRadius: '8px', borderRadius: "8px",
marginRight: '20px', marginRight: "20px",
}} }}
/> />
<CardContent> <CardContent>
<Typography variant="h6" sx={{ fontWeight: 'bold' }}> <Typography variant="h6" sx={{ fontWeight: "bold" }}>
{item.title} {item.title}
</Typography> </Typography>
<Typography variant="body2">{item.description}</Typography> <Typography variant="body2">{item.description}</Typography>
@@ -132,17 +266,18 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
{/* Section Action */} {/* Section Action */}
<Box <Box
sx={{ sx={{
backgroundColor: '#0e467f', backgroundColor: "#0e467f",
color: 'white', color: "white",
textAlign: 'center', textAlign: "center",
padding: '40px 20px', padding: "40px 20px",
}} }}
> >
<Typography variant="h2" sx={{ fontWeight: 'bold', mb: 2 }}> <Typography variant="h2" sx={{ fontWeight: "bold", mb: 2 }}>
Prêt à démarrer ? Prêt à démarrer ?
</Typography> </Typography>
<Typography variant="body1" sx={{ mb: 4 }}> <Typography variant="body1" sx={{ mb: 4 }}>
Rejoignez-nous dès aujourd’hui et profitez de nos services pour booster votre activité. Rejoignez-nous dès aujourd’hui et profitez de nos services pour
booster votre activité.
</Typography> </Typography>
<Button <Button
href={ctaLink} href={ctaLink}
@@ -150,10 +285,10 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
color="secondary" color="secondary"
size="large" size="large"
sx={{ sx={{
textTransform: 'none', textTransform: "none",
fontWeight: 'bold', fontWeight: "bold",
backgroundColor: '#00bcd4', backgroundColor: "#00bcd4",
'&:hover': { backgroundColor: '#0288d1' }, "&:hover": { backgroundColor: "#0288d1" },
}} }}
> >
{ctaText} {ctaText}
@@ -163,4 +298,4 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
); );
}; };
export default ServicePageTemplate; export default ServicePageTemplate;