design

src/components/HeroBanner.vue

@@ -34,8 +34,8 @@
   
         <div
           class="text-white text-center q-py-lg center-block text-bold"
-          :class="$q.screen.lt.sm ? 'text-h4' : 'text-h3'"
+          :class="$q.screen.lt.sm ? 'text-h4' : 'text-h2'"
-          style="line-height: 1.5em;"
+          style="line-height: 1.25em;"
           >
           {{ $t('banner__slogan_body') }}
           <span class="text-no-wrap" color="primary">

src/components/ProblemSection.vue

@@ -9,7 +9,6 @@
         :key="idx"
         >
         <problem-section-item
-          :icon="item.icon"
           :title="item.title"
           :description="item.description"
           class="bg-red"

src/components/ProblemSectionItem.vue

@@ -2,13 +2,7 @@
   <div
     class="crew-card column items-center q-pa-xl cursor-pointer fit"
     >
-    <q-icon
+    <div class="text-bold text-h4 text-center q-pt-md">
-      :name="icon"
-      size="xl"
-      color="primary"
-    />
-
-    <div class="text-bold text-h5 text-center q-pt-md">
       {{ $t(title ?? '') }}
     </div>
     
@@ -21,7 +15,6 @@
 <script setup lang="ts">
 
 defineProps({
-  icon: String,
   title: String,
   description: String
 })

src/components/SlideTemplate.vue

@@ -2,13 +2,14 @@
   <div class="flex column no-wrap q-mt-lg">
     <div
       v-if="title"
-      class="w100 q-my-md q-px-md text-h4 text-bold text-grey text-center"
+      class="w100 q-my-md q-px-md text-h3 text-bold text-primary text-center"
       >
       {{ $t(title) }}
     </div>
     <div
       v-if="subtitle"
       class="w100 q-mb-md q-px-xl text-h6 text-grey-7 text-center"
+      style="max-width: 75%; align-self: center;"
       >
       {{ $t(subtitle) }}
     </div>