a propos

Author: sandragjacinto

src/components/ChatComponent.vue

@@ -179,6 +179,14 @@ const computedStatus = computed(() => store.chatStatus);
     z-index: 1;
   }
 
+  .queues-wrapper {
+    width: 95%;
+    display: block;
+    padding-top: 0.5rem;
+    margin: auto;
+    margin-top: auto;
+  }
+
   .input-area {
     width: 85%;
     padding: 0.25rem 0.25rem;

src/components/ChatQueuesPills.vue

@@ -69,6 +69,10 @@ defineProps<{
     margin: 0;
     font-size: 0.9rem;
   }
+
+  .card {
+    margin: 0rem 0rem;
+  }
 }
 
 @media screen and (min-width: 768px) {

src/components/FooterComponent.vue

@@ -35,4 +35,17 @@ a:first-child {
 a:hover {
   text-decoration: underline;
 }
+
+@media screen and (max-width: 767px) {
+  .footer-wrapper {
+    padding: 0 1rem;
+    justify-content: center;
+    font-size: 0.8rem;
+  }
+
+  a:first-child {
+    margin-right: 0.5rem;
+    padding-right: 0.5rem;
+  }
+}
 </style>

src/views/AboutPage.vue

@@ -8,17 +8,17 @@ const sourcesStore = useSourcesStore();
   <div class="wrapper py-6">
     <div class="presentation is-flex is-fullwidth is-justify-content-center is-align-items-center">
       <div class="call-to-action is-flex is-flex-direction-column is-justify-content-space-between">
-        <div class="is-size-1 has-text-weight-bold has-text-centered is-uppercase">
+        <div class="is-size-1 is-size-4-mobile has-text-weight-bold has-text-centered is-uppercase">
           {{ $t('landing.slogan') }}
         </div>
-        <p class="subtitle has-text-centered mt-4 mb-6">
+        <p class="subtitle is-size-6-mobile has-text-centered mt-4 mb-6">
           {{ $t('landing.description') }}
         </p>
       </div>
     </div>
 
-    <div class="has-text-centered partnership">
-      <div class="is-flex my-4 is-justify-content-space-between is-align-items-center">
+    <div class="partnership">
+      <div class="logos my-4">
         <img alt="logo" class="partner-logo mx-4" src="@/assets/lpi_logo.png" />
         <img alt="logo" class="partner-logo mx-4" src="@/assets/uved.png" />
         <img alt="logo" class="partner-logo mx-4" src="@/assets/cy_logo.png" />
@@ -27,9 +27,9 @@ const sourcesStore = useSourcesStore();
       <h1 class="subtitle is-6 mt-6">{{ $t('landing.partnership') }}</h1>
     </div>
 
-    <div class="product-description has-text-centered">
-      <h3 class="title is-size-4 pt-6">{{ $t('landing.aboutTitle') }}</h3>
-      <p class="subtitle mt-4">
+    <div class="product-description">
+      <h3 class="title is-size-4 pt-6 has-text-centered">{{ $t('landing.aboutTitle') }}</h3>
+      <p class="subtitle is-size-6-mobile mt-4">
         {{ $t('landing.aboutDescription') }}
       </p>
     </div>
@@ -85,9 +85,9 @@ const sourcesStore = useSourcesStore();
     <div class="section mt-6">
       <div class="is-flex is-fullwidth is-justify-content-space-evenly">
         <div class="description">
-          <p class="subtitle has-text-weight-bold mb-2">
+          <p class="subtitle is-size-6-mobile has-text-weight-bold mb-2">
             {{ $t('landing.horizontal.section_one.title') }}
-            <span class="is-size-4 ml-4">></span>
+            <span class="is-size-4 is-size-6-mobile ml-4">></span>
           </p>
           <p class="subtitle is-size-6 pb-6">
             {{ $t('landing.horizontal.section_one.content') }}
@@ -98,11 +98,11 @@ const sourcesStore = useSourcesStore();
     <div class="section">
       <div class="is-flex is-fullwidth is-justify-content-space-evenly">
         <div class="description">
-          <p class="subtitle has-text-weight-bold mb-2">
+          <p class="subtitle is-size-6-mobile has-text-weight-bold mb-2">
             {{ $t('landing.horizontal.section_two.title') }}
-            <span class="is-size-4 ml-4">></span>
+            <span class="is-size-4 is-size-6-mobile ml-4">></span>
           </p>
-          <p class="subtitle is-size-6 pb-6">
+          <p class="subtitle is-size-6 is-size-6-mobile pb-6">
             {{ $t('landing.horizontal.section_two.content') }}
           </p>
         </div>
@@ -111,9 +111,9 @@ const sourcesStore = useSourcesStore();
     <div class="section">
       <div class="is-flex is-fullwidth is-justify-content-space-evenly">
         <div class="description">
-          <p class="subtitle has-text-weight-bold mb-2">
+          <p class="subtitle is-size-6-mobile has-text-weight-bold mb-2">
             {{ $t('landing.horizontal.section_three.title') }}
-            <span class="is-size-4 ml-4">></span>
+            <span class="is-size-4 is-size-6-mobile ml-4">></span>
           </p>
           <p class="subtitle is-size-6 pb-6">
             {{ $t('landing.horizontal.section_three.content') }}
@@ -122,24 +122,26 @@ const sourcesStore = useSourcesStore();
       </div>
     </div>
     <div class="section px-6 pb-6">
-      <div class="is-flex mx-6">
+      <div class="is-flex is-flex-wrap-wrap mx-6">
         <div class="px-4">
-          <p class="subtitle has-text-weight-bold">
+          <p class="subtitle is-size-6-mobile has-text-weight-bold">
             {{ $t('landing.vertical.section_one.title') }}
           </p>
-          <p class="subtitle">{{ $t('landing.vertical.section_one.content') }}</p>
+          <p class="subtitle is-size-6-mobile">{{ $t('landing.vertical.section_one.content') }}</p>
         </div>
         <div class="px-6">
-          <p class="subtitle has-text-weight-bold">
+          <p class="subtitle is-size-6-mobile has-text-weight-bold">
             {{ $t('landing.vertical.section_two.title') }}
           </p>
-          <p class="subtitle">{{ $t('landing.vertical.section_two.content') }}</p>
+          <p class="subtitle is-size-6-mobile">{{ $t('landing.vertical.section_two.content') }}</p>
         </div>
         <div class="px-6">
-          <p class="subtitle has-text-weight-bold">
+          <p class="subtitle is-size-6-mobile has-text-weight-bold">
             {{ $t('landing.vertical.section_three.title') }}
           </p>
-          <p class="subtitle">{{ $t('landing.vertical.section_three.content') }}</p>
+          <p class="subtitle is-size-6-mobile">
+            {{ $t('landing.vertical.section_three.content') }}
+          </p>
         </div>
       </div>
     </div>
@@ -170,7 +172,7 @@ const sourcesStore = useSourcesStore();
 }
 
 .sources-table {
-  width: 100%;
+  width: 90%;
 }
 
 .wrapper {
@@ -186,6 +188,13 @@ const sourcesStore = useSourcesStore();
 .partnership {
   width: 45%;
   margin: auto;
+  text-align: justify;
+}
+
+.logos {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .partner-logo {
@@ -196,6 +205,7 @@ const sourcesStore = useSourcesStore();
 .product-description {
   width: 60%;
   margin: auto;
+  text-align: center;
 }
 
 .section {
@@ -215,4 +225,50 @@ const sourcesStore = useSourcesStore();
 .is-local-size-1 {
   font-size: 4rem;
 }
+
+@media screen and (max-width: 767px) {
+  .presentation {
+    width: 90%;
+  }
+
+  .partner-logo {
+    margin: auto;
+    height: 2.5rem;
+  }
+
+  .logos {
+    flex-wrap: wrap;
+    gap: 2rem;
+    justify-content: center;
+  }
+
+  .partnership {
+    width: 90%;
+    margin: auto;
+    text-align: justify;
+  }
+
+  .product-description {
+    width: 90%;
+    text-align: justify;
+  }
+
+  .section.mt-6 {
+    --bulma-section-padding: 1.5rem;
+    margin-top: 1rem !important;
+  }
+
+  .section {
+    --bulma-section-padding: 1.5rem;
+  }
+
+  .px-6 {
+    padding-left: 1.5rem !important;
+    padding-right: 1.5rem !important;
+  }
+
+  .description {
+    width: 100%;
+  }
+}
 </style>