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:
'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.' },
{
title: 'Fondamentaux de l’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',
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
image: 'https://picsum.photos/id/453/800/400.webp',
},
{
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
image: 'https://picsum.photos/id/454/800/400.webp',
},
{
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
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:
'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.' },
{
title: 'Frontend Development',
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',
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 Modern',
description: 'Montrez vos compétences avec un portfolio unique.',
image: 'https://picsum.photos/id/305/800/400.webp',
},
{
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
title: 'Blog SEO',
description: 'Optimisez vos articles pour le référencement.',
image: 'https://picsum.photos/id/306/800/400.webp',
},
],
};
frontend/src/components/ServicePageTemplate.jsx
+188 -53
View File
@@ -1,34 +1,75 @@
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';
import React, { useState } from "react";
import {
Box,
Typography,
Button,
Grid,
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 (
<Box sx={{ backgroundColor: '#f5f5f5', color: '#333', fontFamily: 'Arial, sans-serif' }}>
<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',
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 }}>
<Box sx={{ maxWidth: "800px" }}>
<Typography variant="h1" sx={{ fontWeight: "bold", mb: 2 }}>
{title}
</Typography>
<Typography variant="h6" sx={{ mb: 4 }}>
<Typography variant="body1" sx={{ mb: 4 }}>
{subtitle}
</Typography>
<Button
@@ -37,10 +78,10 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
color="secondary"
size="large"
sx={{
textTransform: 'none',
fontWeight: 'bold',
backgroundColor: '#0e467f',
'&:hover': { backgroundColor: '#00bcd4' },
textTransform: "none",
fontWeight: "bold",
backgroundColor: "#0e467f",
"&:hover": { backgroundColor: "#00bcd4" },
}}
>
{ctaText}
@@ -49,18 +90,24 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
</Box>
{/* Section Interest */}
<Box sx={{ padding: '40px 20px', textAlign: 'center' }}>
<Typography variant="h2" sx={{ fontWeight: 'bold', mb: 2 }}>
<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 }}>
<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 }}>
<Box sx={{ backgroundColor: "#ffffff", padding: "40px 20px" }}>
<Typography
variant="h2"
sx={{ fontWeight: "bold", textAlign: "center", mb: 4 }}
>
Ce que nous offrons
</Typography>
<Grid container spacing={4} justifyContent="center">
@@ -70,13 +117,23 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
sx={{
boxShadow: 2,
borderRadius: 2,
textAlign: 'center',
padding: '20px',
backgroundColor: '#f9f9f9',
textAlign: "center",
padding: "20px",
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>
<Typography variant="h6" sx={{ fontWeight: 'bold', mb: 2 }}>
<Typography
variant="h3"
sx={{ fontWeight: "bold", mb: 2, fontSize: 26 }}
>
{feature.title}
</Typography>
<Typography variant="body2">{feature.description}</Typography>
@@ -87,9 +144,79 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
</Grid>
</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 */}
{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 }}>
Découvrez nos réalisations
</Typography>
@@ -104,20 +231,27 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
>
{carouselItems.map((item, 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
src={item.image}
alt={item.title}
style={{
width: '40%',
height: 'auto',
objectFit: 'cover',
borderRadius: '8px',
marginRight: '20px',
width: "40%",
height: "auto",
objectFit: "cover",
borderRadius: "8px",
marginRight: "20px",
}}
/>
<CardContent>
<Typography variant="h6" sx={{ fontWeight: 'bold' }}>
<Typography variant="h6" sx={{ fontWeight: "bold" }}>
{item.title}
</Typography>
<Typography variant="body2">{item.description}</Typography>
@@ -132,17 +266,18 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
{/* Section Action */}
<Box
sx={{
backgroundColor: '#0e467f',
color: 'white',
textAlign: 'center',
padding: '40px 20px',
backgroundColor: "#0e467f",
color: "white",
textAlign: "center",
padding: "40px 20px",
}}
>
<Typography variant="h2" sx={{ fontWeight: 'bold', mb: 2 }}>
<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é.
Rejoignez-nous dès aujourd’hui et profitez de nos services pour
booster votre activité.
</Typography>
<Button
href={ctaLink}
@@ -150,10 +285,10 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
color="secondary"
size="large"
sx={{
textTransform: 'none',
fontWeight: 'bold',
backgroundColor: '#00bcd4',
'&:hover': { backgroundColor: '#0288d1' },
textTransform: "none",
fontWeight: "bold",
backgroundColor: "#00bcd4",
"&:hover": { backgroundColor: "#0288d1" },
}}
>
{ctaText}
@@ -163,4 +298,4 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
);
};
export default ServicePageTemplate;
export default ServicePageTemplate;