Feauture/a UI 004 041

src/components/Experiences/Experience.css

@@ -0,0 +1,13 @@
+.bloc{
+   display: block; 
+   overflow: hidden;
+}
+.name{
+      font-weight: bold;
+      font-size: 22px;
+}
+.metier
+{
+ font-size:17px;
+ overflow: hidden;
+}

src/components/Experiences/ExperienceButton.tsx

@@ -0,0 +1,59 @@
+import { Button } from "@mui/material";
+import { Colors } from "../../core/colors";
+import { SHAKE } from "../../core/animations";
+
+export default function ExperienceButton(props: CTAButtonProps) {
+  return (
+    <Button
+      data-testid="ctaButton"
+      variant="contained"
+      disableRipple
+      sx={{
+        background: Colors.BUTTON_GRADIENT_OPACITY_50,
+        width: props.style?.width ? props.style.width :'164px',
+        height: props.style?.height ? props.style.height : '73px',
+        padding: '12px 25px 12px 25px',
+        gap: '10px',
+        borderRadius: '128px',
+        boxShadow: `2px 2px 3px 0px ${Colors.LUEUR_BLEUE} inset`,
+        textTransform: 'none',
+        fontSize: props.style?.fontSize ? props.style.fontSize : '20px',
+        fontWeight: props.style?.fontWeight ? props.style.fontWeight : 'bold',
+        lineHeight: 'initial',
+        textAlign: 'center',
+        alignItems: "center",
+        justifyContent: "center",
+        color: Colors.ORANGE,
+        ':hover': {
+          animation: `${SHAKE} 0.82s cubic-bezier(.36, .07, .19, .97) both infinite;`,
+          boxShadow: `
+          0 0 8px ${Colors.LUEUR_BLEUE},
+          inset 0 0 8px ${Colors.LUEUR_BLEUE},
+          0 0 16px ${Colors.TURQUOISE},
+          inset 0 0 16px ${Colors.TURQUOISE},
+          0 0 32px ${Colors.TURQUOISE},
+          inset 0 0 32px ${Colors.TURQUOISE} `,
+          background: Colors.BUTTON_GRADIENT,
+        },
+
+      }}
+      href={props.href}
+    >
+      {props.children}
+    </Button>
+  )
+}
+
+export interface CTAStyleProps {
+  width: string;
+  height: string;
+  fontSize?: string;
+  fontWeight?: string;
+}
+
+export interface CTAButtonProps {
+  href: string;
+  children: React.ReactNode;
+  style?: CTAStyleProps;
+
+}

src/components/Experiences/ExperienceCard.tsx

@@ -0,0 +1,121 @@
+import { Box, Link, Rating } from "@mui/material"
+import { Colors} from "../../core/colors";
+import "./Experience.css"
+
+
+export default function ExperienceCard({ experience, key }: Props,) 
+  {
+
+  return (
+
+    <Box 
+    sx={{
+      flexDirection:"column",
+      justifyContent:"flex-start",
+      alignItems:'flex',
+      borderRadius: "0 0 40% 40%",
+      TextOverflow: "ellipsis",
+      width:'387px',
+      height:"489px",
+      position: "static",
+      background : "linear-gradient(#071520,#0D2D45)",
+      border:"solid 3px #0F5C73"
+    }}
+
+    key={key}>
+      <Box 
+      sx={{width:"100%",
+            paddingTop:"15px",
+            height:"70px",
+            paddingLeft:"30px",
+            paddingRight:"30px",
+            display:"flex",
+            gap: "150px",
+            background:"radial-gradient(50px at 50% -20%,#0D2D45,#071520)"}}
+      >
+       <img src="/src/assets/img/Experiences/Guillemets.png" style={{ height:"48px"}} alt=""/>
+       <Rating name="read-only" value={experience.rating}  precision={0.5}
+       readOnly/>
+      </Box>
+
+      <Box
+        width='50%'
+        paddingTop="20px"
+        paddingLeft="30px"
+
+      >
+        <h3
+          style={{
+            color: Colors.ORANGE,
+            fontFamily: 'Cabin',
+            fontSize: '28px',
+            lineHeight: '29px',
+            fontWeight: "bold",
+          }}
+        >{experience.title}</h3>
+      </Box>
+      <Box
+      paddingTop="30px"
+      paddingLeft="30px"
+      fontSize= '22px'
+      fontFamily="Cabin"
+      lineHeight="31px"
+      paddingX="30px"
+      height="230px"
+      textAlign= "start"
+      >
+      «{experience.commentary}»
+      </Box>
+
+      <Box 
+      display="flex"
+      paddingLeft="70px"
+      paddingRight="60px"
+      gap="20px"
+      textAlign= "start"
+      fontFamily= 'Cabin'
+      >
+      <img
+        src={`/src/assets/img/Experiences/${experience.imageUrl}`}
+        alt={'${experience.title}'}
+        style={{
+          width: '50px',
+          height:"50px",
+        }}
+      />
+      <div className="bloc">
+      <div className="name">
+        {experience.username}
+      </div>
+      <div className="metier">  
+        {experience.metier}<br/>
+        {experience.specialite}
+      </div>
+      </div>
+      </Box>
+      <Box>
+
+      </Box>
+
+  </Box>
+
+    )
+}
+
+
+
+export interface ExperienceProps {
+
+  imageUrl?:   string,
+  title?:      string,
+  commentary?: string ,
+  username?:   string,
+  rating?:     number,
+  metier?:     string,
+  specialite?: string
+}
+
+interface Props {
+  experience: ExperienceProps
+  key: number
+}

src/components/Experiences/ExperienceCarousel.tsx

@@ -0,0 +1,75 @@
+import { Box } from '@mui/system';
+import Slider from 'react-slick';
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import { settings } from '../../core/ui/config/slider';
+import ExperienceCard from './ExperienceCard'
+import { experiences } from '../../views/experiences';
+import Experiences from '../Sections/Experiences';
+import NextExperience from '../Experiences/NextExperience';
+
+export default function ProjectCarousel() {
+
+
+  let settings = {
+    infinite: true,
+    slidesToShow: 4,
+    slidesToScroll: 1,
+    nextArrow: <NextExperience />,
+    responsive: [
+      {
+        breakpoint: 1750,
+        settings: {
+          slidesToShow: 3,
+          slidesToScroll: 1,
+          infinite: true,
+
+        }
+      },
+      {
+        breakpoint: 1460,
+        settings: {
+          slidesToShow: 2,
+          slidesToScroll: 1,
+          infinite: true,
+
+        }
+      },
+      {
+        breakpoint: 1070,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+          infinite: true,
+
+        }
+      }
+    ]
+  };
+
+  return (
+    <Box>
+      <Slider {...settings} >
+        {
+          experiences.map((experience, index) => {
+            return (
+              <ExperienceCard
+                key={index}
+                experience={{
+                  imageUrl: experience.imageUrl,
+                  title: experience.title,
+                  commentary: experience.commentary,
+                  username: experience.username ,
+                  rating: experience.rating,
+                  metier:experience.metier,
+                  specialite : experience.specialite,
+
+                }}
+              />
+            )
+          })
+        }
+      </Slider>
+    </Box>
+  )
+}

src/components/Experiences/NextExperience.tsx

@@ -0,0 +1,29 @@
+import { CustomArrowProps } from 'react-slick'
+
+export default function NextExperience(props: CustomArrowProps) {
+
+  return (
+    <svg
+      onClick={props.onClick}
+      className={props.className}
+      viewBox="0 0 33 44"
+      fill="none"
+      style={{
+        ...props.style,
+        position: 'absolute',
+        top: '45%',
+        right: '-2%',
+        transform: 'translate(0, -50%)',
+        cursor: 'pointer',
+        width: '38px',
+        height: '38px',
+      }}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M26.0664 17.4993C29.0172 19.4803 29.0172 23.8209 26.0664 25.8019L7.78692 38.0736C4.46524 40.3036 0 37.9231 0 33.9223V9.37893C0 5.37814 4.46523 2.99768 7.78691 5.22764L26.0664 17.4993Z"
+        fill="white"
+      />
+    </svg>
+  )
+}

src/components/Sections/Experiences.tsx

@@ -1,4 +1,58 @@
-import Section from '../Section'
+import { Box } from "@mui/material"
+import Section from "../../components/Section"
+import ExperienceCarousel from "../Experiences/ExperienceCarousel"
+import ExperienceButton from "../Experiences/ExperienceButton"
+
+export default function Experiences() {
+  return (
+  <Box
+     paddingLeft="75px"
+     paddingTop='72px'
+     paddingBottom="37px"
+     >
+
+  <Box
+     >
+       <Section  title="Ils racontent leur expérience"
+        id="feedbacks" 
+        scrollBarDist='28px'
+       >
+          <p></p>
+
+        <Box
+        textAlign='center'
+        width='100%'
+        sx={{
+          marginTop: '24px',
+
+        }}>
+
+        <ExperienceCarousel/>
+        <div style={{
+          paddingBottom: "37px"
+        }}></div>
+        <ExperienceButton
+          href="/inscription"
+          style={{
+            width: '279px',
+            height: '73px',
+            fontSize: '30px',
+            fontWeight: '400',
+          }}
+
+        >
+          Je suis motivé(e)
+        </ExperienceButton>
+
+      </Box>
+
+      </Section>
+      </Box>
+      </Box>
+      )}
+
+
+/*import Section from '../Section'
 
 export default function Experiences() {
   return (
@@ -10,4 +64,4 @@ export default function Experiences() {
     </Section>
 
   )
-}
+}*/