Commit

Ajustements animation et feuilles scss

Kasa/src/Composants/Banners/Banner.scss

@@ -12,7 +12,7 @@
   top : 100px;
   text-align: center;
   @include s.mobile-only {
-    top : 35px;
+    top : 100px;
     width: 100%;
     text-align: center;
   }
@@ -33,7 +33,7 @@
   height: 220px;
   border-radius: 40px;
   @include s.mobile-only {
-    height : 110px;
+    border-radius : 20px;
   }
 }
 

Kasa/src/Composants/Footer/Footer.scss

@@ -18,7 +18,7 @@
   }
   & h2 {
     font-weight : 500;
-    font-size : 24px;
+    font-size : 18px;
     Line-height : 34.22px;
     color: white;
   }

Kasa/src/Composants/Logement/Accordionlogement.jsx

@@ -23,7 +23,7 @@ const AccordionLogement = ({ content, text }) => {
           ></img>
         </div>
       </div>
-      {isActive && <p className="accordion-content">{content}</p>}
+      {isActive && <div className={`accordion-content ${rotateChevron ? "ouvert" : ""}`}>{content}</div>}
     </div>
   );
 };

Kasa/src/Composants/Logement/CarrouselComposent.jsx

@@ -1,35 +1,52 @@
-import React, {useState} from "react"
+import React, { useState } from "react";
 import Flechegauche from "../../Images/Flechegauche.png";
 import Flechedroite from "../../Images/Flechedroite.png";
 import "../../Pages/Fichelogement/Fichelogement.scss";
 import useLogement from "./Datalogement";
 
 const Carrousel = () => {
-    const logement = useLogement();
-    const [imageActuelle, setImageActuelle] = useState(0);
-    const image = logement.pictures[imageActuelle];
-    const compteur = `${imageActuelle + 1} / ${logement.pictures.length}`;
-
-    const imageSuivante = () => {
-        setImageActuelle((prevIndex) => {
-          const nextIndex = prevIndex + 1;
-          return nextIndex === logement.pictures.length ? 0 : nextIndex;
-        });
-      };
-
-      const imagePrecedente = () => {
-        setImageActuelle((prevIndex) => {
-          const nextIndex = prevIndex - 1;
-          return nextIndex < 0 ? logement.pictures.length - 1 : nextIndex;
-        });
-      };
+  const logement = useLogement();
+  const [imageActuelle, setImageActuelle] = useState(0);
+  const image = logement.pictures[imageActuelle];
+  const compteur = `${imageActuelle + 1} / ${logement.pictures.length}`;
+
+  const imageSuivante = () => {
+    setImageActuelle((prevIndex) => {
+      const nextIndex = prevIndex + 1;
+      return nextIndex === logement.pictures.length ? 0 : nextIndex;
+    });
+  };
+
+  const imagePrecedente = () => {
+    setImageActuelle((prevIndex) => {
+      const nextIndex = prevIndex - 1;
+      return nextIndex < 0 ? logement.pictures.length - 1 : nextIndex;
+    });
+  };
+  if (logement.pictures.length <= 1) {
     return (
-        <div className="carrousel">
-            <img className="carrousel_img" src={image} alt="logement"/>
-            <img className="carrousel__arrow carrousel__flechedroite" src={Flechedroite} alt="" onClick={imageSuivante}></img>
-            <img className="carrousel__arrow carrousel__flechegauche" src={Flechegauche} alt="" onClick={imagePrecedente}></img>
-            <div className="carrousel_compteur">{compteur}</div>
-        </div>
-    )
-}
-export default Carrousel;
+      <div className="carrousel">
+        <img className="carrousel_img" src={image} alt="logement" />
+      </div>
+    );
+  }
+  return (
+    <div className="carrousel">
+      <img className="carrousel_img" src={image} alt="logement" />
+      <img
+        className="carrousel__fleche carrousel__flechedroite"
+        src={Flechedroite}
+        alt=""
+        onClick={imageSuivante}
+      ></img>
+      <img
+        className="carrousel__fleche carrousel__flechegauche"
+        src={Flechegauche}
+        alt=""
+        onClick={imagePrecedente}
+      ></img>
+      <div className="carrousel_compteur">{compteur}</div>
+    </div>
+  );
+};
+export default Carrousel;

Kasa/src/Composants/Logement/Contenulogement.jsx

@@ -24,12 +24,12 @@ const Titrelogement = () => {
   }
   return (
     <section>
-        <div className="title">
-            <div className="tilte_info">
+        <div className="titre">
+            <div className="titre_info">
                 <h1>{logement.title}</h1>
                 <p>{logement.location}</p>
             </div>
-            <div className="title_name">
+            <div className="titre_nom">
                 <p>{logement.host.name}</p>
                 <img className="photovendeur" src={logement.host.picture} alt={logement.host.name}></img>
             </div>

Kasa/src/Pages/Apropos/Apropos.scss

@@ -26,33 +26,26 @@
 
   @keyframes openModal {
     0% {
-      transform: translateY(5%);
+      transform: scaleY(0);
     }
-    100% {
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes closeModal {
-    0% {
-      transform: translateY(0);
+    80% {
+      transform: scaleY(1.1);
     }
     100% {
-      transform: translateY(5%);
+      transform: scaleY(1);
     }
   }
 
   & .accordion-content {
-    transition: all 10s linear;
     font-size: 18px;
     color: #ff6060;
     background-color: #f6f6f6;
     padding: 1rem;
     border-radius: 5px;
-    animation: openModal .5s linear;
   }
   .accordion-content.ouvert {
-    animation: closeModal .5s linear;
+    animation: openModal 0.5s ease-in-out forwards;
+    transform-origin: top center;
   }
 }
 

Kasa/src/Pages/D404/D404.jsx

@@ -3,7 +3,7 @@ import './D404.scss';
 
 function Error() {
   return (
-    <div class="texterreur">
+    <div className="texterreur">
       <img src={Erreurimg} className='Erreurimg' alt="404" />
       <h4>Oups! La page que vous demandez n'existe pas.</h4>
       <a href="../">Retourner sur la page d'accueil</a>

Kasa/src/Pages/D404/D404.scss

@@ -1,18 +1,17 @@
 @use "../../index.scss" as s;
 
-
-
 .texterreur {
   display: flex;
   color: #ff6060;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 80px;
+  padding-top: 80px;
   padding-bottom: 80px;
 
   & .Erreurimg {
-    width: 25%;
+    width: 30%;
   }
 
   @include s.mobile-only {