Merge pull request #28 from kumuluz/Visual-updates

Visual updates

Author: filipTurk

src/components/shared/service-range-box/service-range-box.scss

@@ -5,6 +5,8 @@
   .box {
     width: 100%;
     margin: 5px !important;
+    margin-top: 15px !important;
+    padding: 15px;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 
     p {
@@ -14,14 +16,17 @@
     }
 
     img {
-      margin: 20px auto 0 auto;
-      width: 33%;
-      height: 33%;
+      width: auto;
+      max-width: 33%;
+      max-height: 80px;
     }
 
     .img-div {
       width: 100%;
-
+      height: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
   }
 }
@@ -39,13 +44,17 @@
     }
 
     img {
-      margin: 20px auto 0 auto;
-      width: 33%;
-      height: 33%;
+      width: auto;
+      max-width: 33%;
+      max-height: 80px;
     }
 
     .img-div {
       width: 100%;
+      height: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
   }
 }
@@ -64,13 +73,15 @@
     }
 
     img {
-      margin: 20px auto 0 auto;
       width: 33%;
-      height: 33%;
     }
 
     .img-div {
       width: 100%;
+      height: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
       img {
         width: 27%;

src/i18n.js

@@ -62,8 +62,13 @@ const resources = {
   },
 };
 
-i18n
-  .use(LanguageDetector)
+const i18nInstance = i18n;
+
+if (typeof window !== "undefined") {
+  i18nInstance.use(LanguageDetector);
+}
+
+i18nInstance
   .use(initReactI18next)
   .init({
     resources,
@@ -80,4 +85,4 @@ i18n
     },
   });
 
-export default i18n;
+export default i18nInstance;

src/pages/ai/ai-page.scss

@@ -10,7 +10,7 @@ $phone-width: 90%;
     width: 100%;
     padding-top: 60px;
     padding-bottom: 40px;
-    background-color: $blue-300;
+    background: linear-gradient(to right, $blue-300, $blue-400);
 
     h1 {
       color: $white;
@@ -26,12 +26,33 @@ $phone-width: 90%;
     }
   }
 
+  .blue-div
+  {
+    background-color: $blue-400;
+  }
+
   .arrow-header {
+    width: 100%;
+    height: 240px;
+    background: linear-gradient(to right, $blue-300, $blue-400);
+    clip-path: polygon(0 0, 100% 0, 100% 100%);
+  }
+
+  .white-arrow {
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 0 100vw 240px 0;
-    border-color: transparent $blue-300 transparent transparent;
+    border-color: transparent white transparent transparent;
+    transform: rotate(180deg);
+  }
+
+  .white-arrow-reversed {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 240px 100vw 0 0;
+    border-color: $white transparent transparent transparent;
   }
 
   .beige-arrow {
@@ -51,59 +72,40 @@ $phone-width: 90%;
     transform: rotate(180deg);
   }
 
-  .beige-content {
+  .blue-content {
     width: 100%;
-    background-color: $beige;
+    background-color: $blue-400;
     padding-left: 20%;
     padding-right: 20%;
+    padding-top: 40px;
+    padding-bottom: 40px;
 
-    .table-wrapper {
-      .use-case-table {
-        display: flex;
-        justify-content: space-between;
-        align-items: stretch;
-        border: 2px solid black;
-
-        .content {
-          padding: 1rem;
-          text-align: left;
-          flex: 1;
-        }
-
-        .table-separator {
-          width: 2px;
-          background-color: black;
-        }
-
-        li {
-          font-size: 18px;
-          text-align: left;
-          list-style-position: outside;
-          margin-left: 1rem;
-
-          &::marker {
-            color: $blue-300;
-          }
-        }
+    h2 {
+      color: $white;
+    }
 
-        ul {
-          flex: 1;
-          padding-left: 20px;
-          margin: 0;
-        }
-      }
+    p {
+      color: $white;
+    }
 
-      .table-end {
-        border: 2px solid black;
-        border-top: none;
-        font-size: 18px;
-        font-weight: 600;
-        padding: 0.5rem;
-      }
+    .km-unordered-list-component {
+      margin-top: 40px;
     }
 
+    .table-end {
+      color: $white;
+      font-size: 18px;
+      font-weight: 600;
+      margin-top: 40px;
+    }
 
   }
+  
+  .benefits-section {
+    h2 {
+      color: $blue-400;
+    }
+  }
 
   .service-range {
     color: $white;
@@ -312,6 +314,14 @@ $phone-width: 90%;
       border-width: 0 100vw 60px 0;
     }
 
+    .white-arrow {
+      border-width: 0 100vw 60px 0;
+    }
+
+    .white-arrow-reversed {
+      border-width: 60px 100vw 0 0;
+    }
+
     .beige-arrow {
       border-width: 0 100vw 60px 0;
     }
@@ -325,6 +335,11 @@ $phone-width: 90%;
       padding-right: 2rem;
     }
 
+    .blue-content {
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
+
     .service-range {
       .content {
         .normal-text-wrapper {
@@ -442,6 +457,14 @@ $phone-width: 90%;
       border-width: 0 100vw 120px 0;
     }
 
+    .white-arrow {
+      border-width: 0 100vw 120px 0;
+    }
+
+    .white-arrow-reversed {
+      border-width: 120px 100vw 0 0;
+    }
+
     .beige-arrow {
       border-width: 0 100vw 120px 0;
     }