feat: :sparkles: feat (estatisticas da landingpage) reestilizada a exibicao dos dados

reorganizada a exibicao dos dados das estatisticas nas configuracoes da empresa, alem de ser adicionada pre visualizacao de como ficara na landingpage

fase:dev | origin:escopo

src/i18n/locales/en.json

@@ -450,8 +450,10 @@
       "subtitle": "Subtitle"
     },
     "stat": {
+      "title": "Stat {n}",
       "value": "Value (Stat {n})",
-      "label": "Label (Stat {n})"
+      "label": "Label (Stat {n})",
+      "preview": "How it looks on the landing page"
     },
     "contact": {
       "email": "Contact Email",

src/i18n/locales/es.json

@@ -451,8 +451,10 @@
       "subtitle": "Subtítulo"
     },
     "stat": {
+      "title": "Estadística {n}",
       "value": "Valor (Estadística {n})",
-      "label": "Etiqueta (Estadística {n})"
+      "label": "Etiqueta (Estadística {n})",
+      "preview": "Cómo se ve en la landing page"
     },
     "contact": {
       "email": "Correo de Contacto",

src/i18n/locales/pt.json

@@ -451,8 +451,10 @@
       "subtitle": "Subtítulo"
     },
     "stat": {
+      "title": "Estatística {n}",
       "value": "Valor (Estatística {n})",
-      "label": "Rótulo (Estatística {n})"
+      "label": "Rótulo (Estatística {n})",
+      "preview": "Como aparece na landing page"
     },
     "contact": {
       "email": "E-mail de Contato",

src/pages/company-settings/CompanySettingsPage.vue

@@ -78,20 +78,40 @@
                 <div class="text-subtitle2 q-mb-sm">{{ $t("company_settings.section.stats") }}</div>
               </div>
 
-              <template v-for="n in 3" :key="n">
-                <DefaultInput
-                  v-model="form[`stat${n}_value`]"
-                  v-model:error="validationErrors[`stat${n}_value`]"
-                  :label="$t('company_settings.stat.value', { n })"
-                  class="col-md-3 col-6"
-                />
-                <DefaultInput
-                  v-model="form[`stat${n}_label`]"
-                  v-model:error="validationErrors[`stat${n}_label`]"
-                  :label="$t('company_settings.stat.label', { n })"
-                  class="col-md-3 col-6"
-                />
-              </template>
+              <div class="col-12">
+                <div class="row q-col-gutter-md">
+                  <div v-for="n in 3" :key="n" class="col-md-4 col-12">
+                    <q-card flat bordered class="q-pa-md column q-gutter-sm">
+                      <div class="text-caption text-weight-medium text-grey-8">
+                        {{ $t("company_settings.stat.title", { n }) }}
+                      </div>
+
+                      <DefaultInput
+                        v-model="form[`stat${n}_value`]"
+                        v-model:error="validationErrors[`stat${n}_value`]"
+                        :label="$t('company_settings.stat.value', { n })"
+                      />
+                      <DefaultInput
+                        v-model="form[`stat${n}_label`]"
+                        v-model:error="validationErrors[`stat${n}_label`]"
+                        :label="$t('company_settings.stat.label', { n })"
+                      />
+
+                      <q-separator class="q-my-xs" />
+
+                      <div class="stat-preview rounded-borders q-pa-md column items-start q-gutter-xs">
+                        <q-icon :name="statIcons[n]" size="28px" class="text-white" style="opacity: .9" />
+                        <span class="text-white text-weight-bold" style="font-size: 1.35rem; line-height: 1.2;">
+                          {{ form[`stat${n}_value`] || "—" }}
+                        </span>
+                        <span class="text-white text-caption" style="opacity: .8">
+                          {{ form[`stat${n}_label`] || "—" }}
+                        </span>
+                      </div>
+                    </q-card>
+                  </div>
+                </div>
+              </div>
 
               <div class="col-12">
                 <div class="text-subtitle2 q-mb-sm">{{ $t("company_settings.section.contacts") }}</div>
@@ -242,6 +262,8 @@ const { t } = useI18n();
 const heroFormRef = useTemplateRef("heroFormRef");
 const imageInputRef = useTemplateRef("imageInputRef");
 
+const statIcons = { 1: "mdi-account-group", 2: "mdi-handshake", 3: "mdi-heart-outline" };
+
 const settings = ref({});
 const uploadingImage = ref(false);
 const removingImage = ref(false);
@@ -385,6 +407,11 @@ onMounted(() => {
 </script>
 
 <style scoped>
+.stat-preview {
+  background-color: var(--q-primary);
+  min-height: 96px;
+}
+
 .benefit-row {
   border: 1px solid rgba(0, 0, 0, 0.12);
   min-height: 52px;