Merge pull request #27 from Andes-hosting/Mauricio-development

Responsive
Andes-hosting · Mar 20, 2024 · c3db95f · c3db95f
2 parents 5ddfafd + 4eaed4c
commit c3db95f
Show file tree

Hide file tree

Showing 26 changed files with 754 additions and 168 deletions.
diff --git a/website-andes-hosting/src/components/bannerTop/BannerTop.scss b/website-andes-hosting/src/components/bannerTop/BannerTop.scss
@@ -13,5 +13,14 @@
         font-size: 16px;
         color: rgba(0, 0, 0, 1);
         text-align: center;
+        width: 90%;
+    }
+}
+
+@media (max-width: 500px) {
+    .banner{
+        h2 {
+            font-size: 14px;
+        }
     }
 }
diff --git a/website-andes-hosting/src/components/benefits/Benefits.scss b/website-andes-hosting/src/components/benefits/Benefits.scss
@@ -34,4 +34,9 @@
         }
     }
 }
-
+/* aqui */
+@media only screen and (max-width: 400px){
+    .container-benefits-page{
+        margin-top: 100px;
+    }
+}
diff --git a/website-andes-hosting/src/components/benefitsCard/BenefitsCard.scss b/website-andes-hosting/src/components/benefitsCard/BenefitsCard.scss
@@ -1,65 +1,76 @@
-@import './../../variables';
+@import "./../../variables";
 
-.benefits-card{
-    display:flex;
-    align-items: start;
+.benefits-card {
+  display: flex;
+  align-items: start;
+  flex-direction: column;
+  width: 33%;
+  background-color: transparent;
+  border: 0;
+  height: 330px;
+  .icon-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 120px;
+    background-color: #3e055b8a;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.65);
+    border-radius: 5px;
+    opacity: 90%;
+  }
+  .benefits-card-title {
+    font-family: $font;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 20px;
+    text-align: center;
+    color: $Color-cyan;
+    margin-top: 15px;
+  }
+  .benefits-card-text {
+    font-family: $font;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    text-align: center;
+    color: $Color-white;
+  }
+  .benefits-text-container {
+    display: flex;
     flex-direction: column;
-    width: 33%;
-    background-color: transparent;
-    border: 0;
-    height: 330px;
-    .icon-container{
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        height: 120px;
-        background-color: #3e055b8a;
-        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.65);
-        border-radius: 5px;
-        opacity: 90%;
-    }
-    .benefits-card-title{
-        font-family: $font;
-        font-style: normal;
-        font-weight: 600;
-        font-size: 20px;
-        text-align: center;
-        color: $Color-cyan;
-        margin-top: 15px;
-        }
-    .benefits-card-text{
-        font-family: $font;
-        font-style: normal;
-        font-weight: 400;
-        font-size: 14px;
-        text-align: center;
-        color: $Color-white;
-        }
-    .benefits-text-container{
-        display: flex;
-        flex-direction: column;
-        align-items: start;
-        justify-content: start;
-    }
+    align-items: start;
+    justify-content: start;
+  }
 }
 
+@media only screen and (max-width: 1100px) {
+  .benefits-card {
+    width: 49%;
+    height: 300px;
+  }
+}
 
-@media only screen  and (max-width: 1100px) {
-    .benefits-card{
-        width: 49%;
+@media only screen and (max-width: 768px) {
+  .benefits-card {
+    width: 100%;
+    height: 250px;
+    .icon-container {
+      height: 110px;
+    }
+    .benefits-card-title {
+      font-size: 16px;
     }
+    .benefits-card-text {
+      font-size: 14px;
+    }
+  }
 }
-   
-   @media only screen and (max-width: 768px) {
+
+@media only screen and (max-width: 500px) {
     .benefits-card{
-        width: 100%;
-        .benefits-card-title{
-            font-size: 16px;
-        }
         .benefits-card-text{
             font-size: 12px;
         }
     }
-
-   }
+}
diff --git a/website-andes-hosting/src/components/btnSection/Btn.scss b/website-andes-hosting/src/components/btnSection/Btn.scss
@@ -1,28 +1,37 @@
 @import './../../variables';
 
-.btn{
+.btnSection{
     background-color: $Color-cyan;
     border-radius: 10px;
     padding: 5px 20px;
     gap: 12px;
     font-family: $font;
     font-size: 14px;
     font-weight: 500;
+    text-decoration: none;
+    color: black;
+    height: auto;
     &:hover{
         background-color: $Color-cyan-hover;
         color: black;
     }
 }
 
 @media only screen and (min-width: 768px) and (max-width: 1280px) {
- .btn{
+ .btnSection{
     font-size: 12px;
  }
 }
 
 @media only screen and (max-width: 768px) {
-    .btn{
+    .btnSection{
         font-size: 11px;
      }
 
+}
+
+@media (max-width: 650px) {
+    .btnSection{
+        font-size: 10px;
+     }
 }
diff --git a/website-andes-hosting/src/components/btnSection/BtnSection.js b/website-andes-hosting/src/components/btnSection/BtnSection.js
@@ -21,7 +21,7 @@ const BtnSection = ({ href, children, text, otherClass='' }) => {
   };
 
   return (
-    <a href={href} onClick={handleClick} className={`btn ${otherClass}`} >
+    <a href={href} onClick={handleClick} className={`btnSection ${otherClass}`} >
       {children}
       {text}
     </a>

diff --git a/website-andes-hosting/src/components/bubble/Bubble.scss b/website-andes-hosting/src/components/bubble/Bubble.scss
@@ -2,7 +2,6 @@ $bubble-color: #883cae;
 $bubble-figma: #00FFF9/* #03BCB8 */;
 $bubble-icon: black;
 
-
 .fixed {
     position: fixed;
     bottom: 30px;
@@ -23,16 +22,6 @@ $bubble-icon: black;
   height: 36px;
 }
 
-/* Estilo para el ícono "+" dentro del botón */
-/* .bubbleIcon {
-  transition: transform 0.3s ease;
-} */
-
-/* Cuando el menú está abierto, rota el ícono "+" */
-/* .bubbleOpen .bubbleIcon {
-  transform: rotate(45deg);
-}
- */
 .btn.bubbleDefault {
   border-radius: 50%;
   width: 70px;
@@ -117,10 +106,12 @@ $bubble-icon: black;
     margin-right: 0px;
     margin-top: 5px;
     animation: bubbleAnimation 0.25s ease-in-out forwards;
-    transform: scale(1);
     opacity: 1;
     width: 70px;
     height: 70px;
+    transition: transform 0.2s ease, opacity 0.2s ease;
+    transform: scale(1);
+    opacity: 0;
 }
 
 .what {
@@ -131,11 +122,8 @@ $bubble-icon: black;
   border: white/* #2AABEE */ 2px solid;
 }
 
-
 /* Estilo para los íconos */
 .dropdown-item svg {
-    /* width: 30px;
-    height: 50px; */
     padding-right: 0px;
 }
 
@@ -153,6 +141,8 @@ $bubble-icon: black;
 .dropdown-item:hover {
     background-color: transparent; /* Cambia el color de fondo cuando se hace hover a transparente */
     color: inherit; /* Hereda el color de texto original */
+    transform: scale(1);
+    opacity: 1;
 }
 
 .speed-dial-animation {
@@ -162,10 +152,9 @@ $bubble-icon: black;
 /* Animación para mostrar el menú desplegable */
 .dropdown-menu.show {
     height: auto; /* Mostrar el menú desplegable */
-    animation: slideDown 0.3s ease; /* Animación de desplazamiento hacia abajo */
+    animation: slideDown 0.3s; /* Animación de desplazamiento hacia abajo */
 }
 
-
 @keyframes speedDialAnimation {
     0% {
       opacity: 0;
@@ -201,8 +190,6 @@ $bubble-icon: black;
     }
   }
 
-
-
   /* Ajustar el retraso de la animación para cada ítem */
   .dropdown-item:nth-child(1) {
     animation-delay: 0.1s; /* Retraso para el primer ítem */
@@ -212,23 +199,6 @@ $bubble-icon: black;
     animation-delay: 0.2s; /* Retraso para el segundo ítem */
   }
 
-
-.dropdown-item {
-    transition: transform 0.2s ease, opacity 0.2s ease;
-  }
-
-
-  .dropdown-item {
-    transform: scale(0);
-    opacity: 0;
-  }
-
-
-.dropdown-item:hover {
-    transform: scale(1);
-    opacity: 1;
-  }
-
 // Bubble.scss
 .bubble-container {
   position: relative;
@@ -241,3 +211,66 @@ $bubble-icon: black;
   bottom: calc(100% + 10px); /* Ajusta el valor según sea necesario */
   left: 0;
 }
+
+
+@media only screen and (min-width: 768px) and (max-width: 1280px){
+  .fixed{
+    .dropup-start{
+      .btn.bubbleDefault{
+        width: 50px;
+        height: 50px;
+        .bubbleIcon{
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          img {
+            width: 30px;
+            height: 30px;
+          }
+        }
+      }
+      .dropdown-item{
+        width: 50px;
+        height: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        a {
+          width: 25px;
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 768px){
+  .fixed{
+    bottom: 20px;
+    right: 10px;
+    .dropup-start{
+      .btn.bubbleDefault{
+        width: 50px;
+        height: 50px;
+        .bubbleIcon{
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          img {
+            width: 30px;
+            height: 30px;
+          }
+        }
+      }
+      .dropdown-item{
+        width: 50px;
+        height: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        a {
+          width: 25px;
+        }
+      }
+    }
+  }
+}