added responsive code for reamining sections

acryldata · Sep 12, 2024 · c195ad2 · c195ad2
1 parent 65228c7
commit c195ad2
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 3 deletions.
diff --git a/docs-website/src/pages/_components/CaseStudy/case-study.module.scss b/docs-website/src/pages/_components/CaseStudy/case-study.module.scss
@@ -50,6 +50,7 @@
   }
 
   .card {
+    position: relative;
     flex: 0 0 auto;
     width: 25%;
     min-width: 300px;

diff --git a/docs-website/src/pages/_components/Community/community.module.scss b/docs-website/src/pages/_components/Community/community.module.scss
@@ -125,7 +125,7 @@
       left: 50%;
       transform: translateX(-50%);
       width: 80%;
-      height: 30px;
+      height: 0px;
       background-color: #ffffff;
       border-bottom-left-radius: 10px;
       border-bottom-right-radius: 10px;
@@ -138,7 +138,7 @@
       left: 50%;
       transform: translateX(-50%);
       width: 80%;
-      height: 30px;
+      height: 0px;
       background-color: #ffffff;
       border-top-left-radius: 10px;
       border-top-right-radius: 10px;

diff --git a/docs-website/src/pages/_components/Ecosystem/ecosystem.module.scss b/docs-website/src/pages/_components/Ecosystem/ecosystem.module.scss
@@ -81,7 +81,8 @@
       overflow: hidden;
       white-space: normal;
       font-size: 1.2rem;
-      min-width: 250px;
+      min-width: 200px;
+      min-height: 100%;
     }
 
     .item1 {

diff --git a/docs-website/src/pages/_components/Testimonials/testimonials.module.scss b/docs-website/src/pages/_components/Testimonials/testimonials.module.scss
@@ -92,5 +92,106 @@
         }
       }
     }
+
+    @media (max-width: 480px) {
+      .testimonials__content {
+        width: 95vw;
+        margin: 0 auto;
+        position: relative;
+        padding: 4rem 0;
+
+        &::before {
+          position: absolute;
+          content: "";
+          top: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 80%;
+          height: 0px;
+          background-color: #ffffff;
+          border-bottom-left-radius: 10px;
+          border-bottom-right-radius: 10px;
+        }
+
+        &::after {
+          position: absolute;
+          content: "";
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 80%;
+          height: 0px;
+          background-color: #ffffff;
+          border-top-left-radius: 10px;
+          border-top-right-radius: 10px;
+        }
+
+        .arrow {
+          position: absolute;
+          cursor: pointer;
+          top: 50%;
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          background: #ffffff;
+          box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.14);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 2rem;
+          color: #747474;
+          transform: translateY(-50%);
+          right: 0;
+
+          &.left {
+            left: -10px;
+          }
+        }
+
+        .testimonials__card {
+          margin: 0rem;
+          display: flex;
+          flex-direction: column;
+
+          .testimonials__logo{
+            width: 20%;
+            img{
+              object-fit: cover;
+            }
+          }
+
+          .testimonials__text {
+            max-width: 95%;
+            margin: auto;
+            color: #2e2e38;
+            .testimonials__quote {
+              font-family: "Manrope";
+              font-style: normal;
+              font-weight: 400;
+              font-size: 1.3rem;
+              line-height: 34px;
+              position: relative;
+
+              .quote {
+                display: inline;
+                position: absolute;
+                bottom: 0;
+                right: 0;
+
+                &.left {
+                  top: -10px;
+                  left: -25px;
+                }
+              }
+            }
+            .testimonials__company {
+              margin-top: 1.2rem;
+              font-size: 1.1rem;
+              color: #9ea3b6;
+            }
+          }
+        }
+      }
+    }
   }
 }