From d1bf16768fade9de51466f2b00f91160ccd378aa Mon Sep 17 00:00:00 2001
From: goncalosard <innsiiiider@hotmail.com>
Date: Tue, 18 Oct 2022 16:38:01 +0100
Subject: [PATCH] feat(documentation): mobile version

---
 .../documentation/src/pages/index.module.scss | 128 ++++++++++++++++++
 1 file changed, 128 insertions(+)

diff --git a/packages/documentation/src/pages/index.module.scss b/packages/documentation/src/pages/index.module.scss
index 8383adf9746..f81f8580c32 100644
--- a/packages/documentation/src/pages/index.module.scss
+++ b/packages/documentation/src/pages/index.module.scss
@@ -8,6 +8,12 @@
   }
 }
 
+@media (max-width: 428px) {
+  .intro {
+    height: 220vh !important;
+  }
+}
+
 // @media (max-width: 1024px) {
 //   .intro {
 //     height: 170vh !important;
@@ -25,6 +31,12 @@
   width: 100%;
 }
 
+@media (max-width: 428px) {
+  .container {
+    padding: 50px 40px 50px 40px !important;
+  }
+}
+
 .container {
   position: relative;
   display: flex;
@@ -53,6 +65,7 @@
   &.industrial_experiance {
     padding: 81px 97px 0 66px;
     height: calc(100vh - var(--ifm-navbar-height));
+    overflow: hidden;
 
     @media (max-width: 768px) {
       .scroll_down {
@@ -61,6 +74,17 @@
       }
     }
 
+    @media (max-width: 428px) {
+      .scroll_down {
+        bottom: -40px !important;
+        left: 42% !important;
+      }
+
+      .headline {
+        margin-left: 0 !important;
+      }
+    }
+
     .scroll_down {
       position: absolute;
       font-size: 5rem;
@@ -86,6 +110,13 @@
     }
   }
 
+
+  @media (max-width: 428px) {
+    &.devices {
+      height: 926px !important;
+    }
+  }
+
   &.devices {
     padding: 40px 66px;
     min-height: 100vh;
@@ -123,6 +154,13 @@
         width: 340px !important;
       }
     }
+
+    @media (max-width: 428px) {
+      .image {
+        top: 220px !important;
+        height: 80% !important;
+      }
+    }
   }
 
   &.ux,
@@ -189,6 +227,13 @@
         width: 380px !important;
       }
     }
+
+    @media (max-width: 428px) {
+      .text_2 {
+        width: 348px !important;
+      }
+    }
+
   }
 
   &.developers {
@@ -199,6 +244,12 @@
         width: 340px !important;
       }
     }
+
+    @media (max-width: 428px) {
+      .bold {
+        line-height: 35px !important;
+      }
+    }
   }
 
   &.features {
@@ -259,12 +310,34 @@
         width: 340px !important;
       }
     }
+
+    @media (max-width: 428px) {
+      .images {
+        gap: 10px !important;
+      }
+    }
   }
 
   &.brand_design {
     padding: 40px 66px;
     min-height: 100vh;
 
+    @media (max-width: 428px) {
+      .arrow {
+        display: none !important;
+      }
+
+      .row {
+        position: absolute;
+        width: 250%;
+        left: -100px;
+      }
+
+      .carousel_indicators {
+        margin-top: 450px;
+      }
+    }
+
     .row {
       display: flex;
       justify-content: center;
@@ -307,6 +380,13 @@
     }
   }
 
+  @media (max-width: 428px) {
+    &.components {
+      background-image: none !important;
+      background-color: #000028;
+    }
+  }
+
   &.components {
     padding: 74px 66px;
     min-height: 100vh;
@@ -337,6 +417,17 @@
         position: absolute;
       }
     }
+
+    @media (max-width: 428px) {
+      .text_dark {
+        color: #ffffff !important;
+      }
+
+      .video {
+        padding-top: 40px !important;
+        height: 210% !important;
+      }
+    }
   }
 
   &.information_cards {
@@ -359,6 +450,13 @@
       }
     }
 
+    @media (max-width: 428px) {
+      .column {
+        flex-direction: column !important;
+        align-items: center !important;
+      }
+    }
+
     .screen {
       width: 100%;
     }
@@ -575,6 +673,12 @@
   }
 }
 
+@media (max-width: 428px) {
+  .brand_desgin_background_image {
+    display: none;
+  }
+}
+
 .brand_desgin_background_image {
   position: absolute;
   z-index: 0;
@@ -607,6 +711,16 @@
     }
   }
 
+  @media (max-width: 428px) {
+    .line {
+      display: none !important;
+    }
+
+    .text_dark {
+      width: 348px !important;
+    }
+  }
+
   .line {
     height: 100%;
     background-image: linear-gradient(to bottom, #00ffb9, #00cccc);
@@ -673,6 +787,12 @@
   color: rgba(0, 0, 0, 0.85);
 }
 
+@media (max-width: 428px) {
+  .description {
+    margin: 30px 0 0 0 !important;
+  }
+}
+
 .description {
   width: 500px;
   margin: 30px 0 0 24px;
@@ -733,6 +853,14 @@
   }
 }
 
+@media (max-width: 428px) {
+  .Card_Info {
+    position: absolute !important;
+  }
+}
+
+
+
 .Card_Icon {
   color: var(--theme-color-primary) !important;
 }