alteracoes layout

- alterado para 3 cards por linha no bloco 'quem somos'
- alterado padrao de icones e titulos
- alterada exibicao das informacoes nos eventos
- criada a exibicao de icones das estatisticas de forma dinamica conforme o cadastro nas configs da empresa no sistema web serprati_digital

app/components/EventCard.vue

@@ -6,17 +6,6 @@
       :aria-expanded="isOpen"
       @click="isOpen = !isOpen"
     >
-      <img
-        v-if="event.cover_url"
-        :src="event.cover_url"
-        :alt="event.title"
-        class="event-thumb"
-        loading="lazy"
-      >
-      <div v-else class="event-thumb event-thumb--empty">
-        <i class="mdi mdi-calendar-star text-violet-normal" style="font-size: 1.5rem;"/>
-      </div>
-
       <div class="min-w-0 flex-1 text-left">
         <span class="event-badge">
           <i :class="`mdi ${typeIcon}`" style="font-size: 0.875rem;"/>
@@ -41,6 +30,15 @@
     <div class="event-body" :class="isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'">
       <div class="overflow-hidden">
         <div class="px-6 pb-6 pt-1">
+          <img
+            v-if="event.cover_url"
+            :src="event.cover_url"
+            :alt="event.title"
+            class="event-cover"
+            :class="{ 'mb-5': paragraphs.length }"
+            loading="lazy"
+          >
+
           <p
             v-for="(paragraph, index) in paragraphs"
             :key="index"
@@ -51,15 +49,6 @@
             {{ paragraph }}
           </p>
 
-          <img
-            v-if="event.cover_url"
-            :src="event.cover_url"
-            :alt="event.title"
-            class="event-cover"
-            :class="{ 'mt-5': paragraphs.length }"
-            loading="lazy"
-          >
-
           <EventCarousel
             v-if="photos.length"
             :photos="photos"
@@ -96,13 +85,13 @@ const paragraphs = computed(() =>
 .event-card {
   background-color: #ffffff;
   border-radius: 1rem;
-  box-shadow: 0 2px 12px rgba(102, 29, 117, 0.07);
+  box-shadow: 0 4px 24px rgba(102, 29, 117, 0.14);
   transition: box-shadow 0.2s;
   overflow: hidden;
   height: 100%;
 }
 .event-card:hover {
-  box-shadow: 0 6px 24px rgba(102, 29, 117, 0.13);
+  box-shadow: 0 8px 36px rgba(102, 29, 117, 0.22);
 }
 
 .event-header {
@@ -115,21 +104,6 @@ const paragraphs = computed(() =>
   text-align: left;
 }
 
-.event-thumb {
-  width: 72px;
-  height: 72px;
-  border-radius: 0.75rem;
-  object-fit: cover;
-  flex-shrink: 0;
-}
-
-.event-thumb--empty {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #f0e8f1;
-}
-
 .event-badge {
   display: inline-flex;
   align-items: center;

app/composables/useCompanyData.ts

@@ -4,10 +4,13 @@ interface CompanySettings {
   hero_subtitle: string | null
   stat1_value: string | null
   stat1_label: string | null
+  stat1_icon: string | null
   stat2_value: string | null
   stat2_label: string | null
+  stat2_icon: string | null
   stat3_value: string | null
   stat3_label: string | null
+  stat3_icon: string | null
   about_vision: string | null
   about_mission: string | null
   about_values: string | null
@@ -35,10 +38,13 @@ const FALLBACK_SETTINGS: CompanySettings = {
   hero_subtitle: 'Benefícios exclusivos, parceiros de qualidade e uma comunidade que cuida de você e sua família.',
   stat1_value: '1.000+',
   stat1_label: 'Associados',
+  stat1_icon: 'mdi-account-group',
   stat2_value: '50+',
   stat2_label: 'Parceiros',
+  stat2_icon: 'mdi-handshake',
   stat3_value: '30+',
   stat3_label: 'Anos de História',
+  stat3_icon: 'mdi-heart-outline',
   about_vision: null,
   about_mission: null,
   about_values: null,

app/pages/index.vue

@@ -42,22 +42,14 @@
 
             <div class="reveal reveal-delay-3 flex flex-row lg:flex-col gap-6 lg:gap-8 shrink-0">
 
-              <div class="flex flex-col items-start gap-1">
-                <span class="material-icons text-white/90 text-3xl lg:text-4xl">group</span>
-                <span class="text-white font-bold" style="font-size: clamp(1.25rem, 2.5vw, 1.75rem);">{{ settings.stat1_value }}</span>
-                <span class="text-white/80 text-sm">{{ settings.stat1_label }}</span>
-              </div>
-
-              <div class="flex flex-col items-start gap-1">
-                <span class="material-icons text-white/90 text-3xl lg:text-4xl">handshake</span>
-                <span class="text-white font-bold" style="font-size: clamp(1.25rem, 2.5vw, 1.75rem);">{{ settings.stat2_value }}</span>
-                <span class="text-white/80 text-sm">{{ settings.stat2_label }}</span>
-              </div>
-
-              <div class="flex flex-col items-start gap-1">
-                <span class="material-icons text-white/90 text-3xl lg:text-4xl">favorite_border</span>
-                <span class="text-white font-bold" style="font-size: clamp(1.25rem, 2.5vw, 1.75rem);">{{ settings.stat3_value }}</span>
-                <span class="text-white/80 text-sm">{{ settings.stat3_label }}</span>
+              <div
+                v-for="stat in stats"
+                :key="stat.key"
+                class="flex flex-col items-start gap-1"
+              >
+                <i :class="`mdi ${stat.icon} text-white/90 text-3xl lg:text-4xl`" />
+                <span class="text-white font-bold" style="font-size: clamp(1.25rem, 2.5vw, 1.75rem);">{{ stat.value }}</span>
+                <span class="text-white/80 text-sm">{{ stat.label }}</span>
               </div>
 
             </div>
@@ -108,7 +100,7 @@
           </h2>
         </div>
 
-        <div v-if="aboutCards.length" class="grid grid-cols-1 gap-6">
+        <div v-if="aboutCards.length" class="grid grid-cols-1 md:grid-cols-3 gap-6 items-stretch">
 
           <div
             v-for="(card, index) in aboutCards"
@@ -116,12 +108,14 @@
             :class="`reveal reveal-delay-${index + 1}`"
             class="benefit-card"
           >
-            <div class="benefit-icon-wrap">
-              <i :class="`mdi ${card.icon} text-violet-normal`" style="font-size: 1.5rem;" />
+            <div class="flex items-center gap-3 mb-4">
+              <div class="benefit-icon-wrap shrink-0">
+                <i :class="`mdi ${card.icon} text-violet-normal`" style="font-size: 1.5rem;" />
+              </div>
+              <h3 class="text-subtitle-1 font-semibold text-text">
+                {{ card.title }}
+              </h3>
             </div>
-            <h3 class="text-subtitle-1 font-semibold text-text mt-4 mb-2">
-              {{ card.title }}
-            </h3>
             <p
               v-for="(paragraph, paragraphIndex) in card.paragraphs"
               :key="paragraphIndex"
@@ -137,24 +131,24 @@
 
         <template v-if="settings.about_history">
           <div
-            class="reveal text-center mb-10 lg:mb-12"
+            class="reveal flex items-center justify-center gap-3 mb-10 lg:mb-12"
             :class="{ 'mt-16 lg:mt-24': aboutCards.length }"
           >
+            <div class="benefit-icon-wrap shrink-0">
+              <i class="mdi mdi-book-open-page-variant-outline text-violet-normal" style="font-size: 1.5rem;" />
+            </div>
             <h2 class="text-h4 text-text" style="font-size: clamp(1.5rem, 3vw, 2.125rem);">
               História
             </h2>
           </div>
 
           <div class="reveal reveal-delay-1 benefit-card history-card">
-            <div class="benefit-icon-wrap">
-              <i class="mdi mdi-book-open-page-variant-outline text-violet-normal" style="font-size: 1.5rem;" />
-            </div>
             <p
               v-for="(paragraph, index) in historyParagraphs"
               :key="index"
               lang="pt-BR"
               class="text-body-1 text-text-2 text-justify hyphens-auto history-text"
-              :class="index === 0 ? 'mt-5' : 'mt-4'"
+              :class="{ 'mt-4': index > 0 }"
             >
               {{ paragraph }}
             </p>
@@ -167,7 +161,10 @@
     <section v-if="events.length" id="eventos" class="bg-neutral-light py-16 lg:py-24">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 
-        <div class="reveal text-center mb-12 lg:mb-16">
+        <div class="reveal flex items-center justify-center gap-3 mb-12 lg:mb-16">
+          <div class="benefit-icon-wrap shrink-0">
+            <i class="mdi mdi-calendar-month-outline text-violet-normal" style="font-size: 1.5rem;" />
+          </div>
           <h2 class="text-h4 text-text" style="font-size: clamp(1.5rem, 3vw, 2.125rem);">
             Eventos
           </h2>
@@ -373,6 +370,17 @@ const { events } = useEvents()
 
 const heroBackground = computed(() => settings.value.hero_background_url ?? heroBgFallback)
 
+const STAT_FALLBACK_ICONS = ['mdi-account-group', 'mdi-handshake', 'mdi-heart-outline']
+
+const stats = computed(() =>
+  [1, 2, 3].map((n, index) => ({
+    key:   `stat${n}`,
+    icon:  settings.value[`stat${n}_icon` as keyof typeof settings.value] || STAT_FALLBACK_ICONS[index],
+    value: settings.value[`stat${n}_value` as keyof typeof settings.value],
+    label: settings.value[`stat${n}_label` as keyof typeof settings.value],
+  }))
+)
+
 const toParagraphs = (raw: string | null): string[] => {
   const content = raw?.trim()
   if (!content) return []
@@ -650,11 +658,11 @@ onMounted(() => {
   background-color: #ffffff;
   border-radius: 1rem;
   padding: 1.75rem;
-  box-shadow: 0 2px 12px rgba(102, 29, 117, 0.07);
+  box-shadow: 0 6px 24px rgba(102, 29, 117, 0.14);
   transition: box-shadow 0.2s, transform 0.2s;
 }
 .benefit-card:hover {
-  box-shadow: 0 6px 24px rgba(102, 29, 117, 0.13);
+  box-shadow: 0 10px 36px rgba(102, 29, 117, 0.22);
   transform: translateY(-2px);
 }
 .history-card {