responsive fixes + fiveicon + share picture

components/complaint/ComplaintDisclaimer.vue

@@ -60,7 +60,7 @@ export default {
     text-transform: uppercase;
     font-family: Inter, sans-serif;
   }
-    
+
   .disclaimer-text {
     color: $gray900;
     font-size: 24px;
@@ -74,4 +74,14 @@ export default {
   }
 }
 
+@media #{map-get($display-breakpoints, 'sm-and-down')} {
+
+  .complaint-disclaimer {
+    .disclaimer-text {
+      font-size: 20px !important;
+      line-height: 30px !important;
+    }
+  }
+}
+
 </style>

components/complaint/ComplaintLocationButton.vue

@@ -101,4 +101,28 @@ export default {
   }
 }
 
+
+@media #{map-get($display-breakpoints, 'sm-and-down')} {
+  .complaint-location-button {
+    .v-btn__content {
+      .button-content {
+        .button-title {
+          width: 100%;
+          color: $gray900;
+          font-size: 14px !important;
+          font-weight: 600;
+          overflow: hidden;
+          text-align: left;
+          line-height: 20px;
+          font-style: normal;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          text-transform: uppercase;
+          font-family: Inter, sans-serif;
+        }
+      }
+    }
+  }
+}
+
 </style>

components/shared/buttons/FormButton.vue

@@ -11,6 +11,7 @@
       v-if="icon"
       :src="icon"
       max-width="100px"
+      class="button-icon"
     />
 
     <div class="button-content">
@@ -29,7 +30,8 @@
         src="/images/website/icons/form-arrow-right.svg"
         width="43px"
         height="43px"
-        class="ml-3"
+        class="ml-3 button-arrow"
+
       />
     </div>
   </v-btn>
@@ -110,6 +112,8 @@ export default {
         letter-spacing: -0.12px;
         text-transform: uppercase;
         font-family: Inter, sans-serif;
+        white-space: normal !important;
+        text-align: left;
       }
 
       .subtitle-container {
@@ -133,14 +137,41 @@ export default {
       }
     }
   }
+
 }
 
 @media #{map-get($display-breakpoints, 'sm-and-down')} {
   .form-button {
     padding: 28px !important;
+    .v-btn__content {
+      .button-content {
+        margin-left: 15px !important;
 
-    .button-content {
-      margin-left: 30px !important;
+        .button-title {
+          font-size: 16px;
+          line-height: 20px;
+          letter-spacing: -0.12px;
+
+        }
+        .subtitle-container {
+          .button-subtitle {
+            white-space: initial !important;
+            margin-top: 16px;
+            font-size: 12px;
+            line-height: 16px;
+            letter-spacing: -0.1px;
+          }
+        }
+      }
+    }
+
+    .button-icon{
+      max-width: 50px !important;
+    }
+
+    .button-arrow{
+      width: 20px !important;
+      height: 20px !important;
     }
   }
 }

components/shared/buttons/FormCheckButton.vue

@@ -10,6 +10,7 @@
       v-if="icon"
       :src="icon"
       max-width="64px"
+      class="form-check-button-icon"
     />
 
     <div class="button-content">
@@ -91,6 +92,7 @@ export default {
         font-style: normal;
         text-transform: uppercase;
         font-family: Inter, sans-serif;
+        text-align: left;
       }
     }
 
@@ -104,4 +106,25 @@ export default {
   }
 }
 
+@media #{map-get($display-breakpoints, 'sm-and-down')} {
+  .form-check-button {
+    .v-btn__content {
+      .button-content {
+        .button-title {
+          font-size: 14px !important;
+          font-weight: 600;
+          line-height: 18px;
+          white-space: normal !important;
+        }
+      }
+
+    }
+    .form-check-button-icon{
+      max-width: 30px !important;
+    }
+  }
+}
+
+
+
 </style>

components/shared/buttons/FormRadioButton.vue

@@ -91,6 +91,8 @@ export default {
         font-style: normal;
         text-transform: uppercase;
         font-family: Inter, sans-serif;
+        white-space: normal !important;
+        text-align: left;
       }
 
       .button-subtitle {
@@ -102,6 +104,8 @@ export default {
         letter-spacing: -0.1px;
         text-transform: uppercase;
         font-family: Inter, sans-serif;
+        white-space: normal !important;
+        text-align: left;
       }
     }
 
@@ -115,4 +119,23 @@ export default {
   }
 }
 
+
+@media #{map-get($display-breakpoints, 'sm-and-down')} {
+  .form-radio-button {
+    .v-btn__content {
+      .button-content {
+        .button-title {
+          font-size: 14px !important;
+          line-height: 20px !important;
+        }
+        .button-subtitle {
+          font-size: 12px !important;
+          line-height: 20px !important;
+        }
+      }
+    }
+  }
+}
+
+
 </style>

components/shared/text/PageTitle.vue

@@ -27,15 +27,10 @@ export default {
 
 @media #{map-get($display-breakpoints, 'sm-and-down')} {
   .page-title {
-    font-size: 2.5rem;
-    line-height: 48px;
+    font-size: 30px !important;
+    line-height: 30px;
   }
 }
 
-@media #{map-get($display-breakpoints, 'sm-and-down')} {
-  .page-title {
-    font-size: 36px !important;
-  }
-}
 
 </style>

layouts/default.vue

@@ -43,6 +43,13 @@ export default {
     AppActions,
     AppHideDialog,
   },
+  head () {
+    return {
+      meta: [
+        { hid: 'og:image', property: 'og:image', content: '/images/website/ceasul-bun-share.png' }
+      ]
+    }
+  },
   data() {
     return {
       hideApp: false,