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,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;