✨ feat(landing): atualizar header e estrutura da página inicial

Fase: dev | Origin: melhoria-interna

app/components/AppHeader.vue

@@ -2,6 +2,7 @@
   <header class="fixed top-0 left-0 right-0 z-50 bg-white shadow-sm h-16">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full flex items-center justify-between">
 
+      <!-- Logo sempre à esquerda -->
       <button class="shrink-0 focus:outline-none" @click="scrollTo('quem-somos')" >
         <img
           class="hidden lg:block h-9"
@@ -15,21 +16,22 @@
         >
       </button>
 
-      <nav class="hidden lg:flex items-center gap-8">
-        <button class="nav-link" @click="scrollTo('quem-somos')" >Quem Somos</button>
-        <button class="nav-link" @click="scrollTo('beneficios')" >Benefícios</button>
-        <span class="nav-link opacity-50 cursor-default select-none">Parceiros</span>
-        <button class="nav-link" @click="scrollTo('associe-se')" >Associe-se</button>
-      </nav>
+      <!-- Todos os itens à direita -->
+      <div class="flex items-center gap-6 lg:gap-8">
+        <nav class="hidden lg:flex items-center gap-8">
+          <button class="nav-link" @click="scrollTo('quem-somos')">Quem Somos</button>
+          <button class="nav-link" @click="scrollTo('beneficios')">Benefícios</button>
+          <span class="nav-link opacity-50 cursor-default select-none">Parceiros</span>
+          <button class="nav-link" @click="scrollTo('associe-se')">Associe-se</button>
+        </nav>
 
-      <div class="flex items-center gap-3 lg:gap-4">
         <nav class="flex lg:hidden items-center gap-3">
-          <button class="nav-link-mobile" @click="scrollTo('beneficios')" >Benefícios</button>
-          <button class="nav-link-mobile" @click="scrollTo('associe-se')" >Associe-se</button>
+          <button class="nav-link-mobile" @click="scrollTo('beneficios')">Benefícios</button>
+          <button class="nav-link-mobile" @click="scrollTo('associe-se')">Associe-se</button>
         </nav>
 
         <button
-          class="border border-violet-normal text-violet-normal text-xs lg:text-sm font-medium px-3 py-1.5 lg:px-5 lg:py-2 rounded-md hover:bg-violet-light transition-colors duration-200 cursor-pointer"
+          class="border border-violet-normal text-violet-normal text-xs lg:text-sm font-semibold px-3 py-1.5 lg:px-5 lg:py-2 rounded-md hover:bg-violet-light transition-colors duration-200 cursor-pointer"
           @click="handleEntrar"
         >
           ENTRAR

app/pages/index.vue

@@ -6,25 +6,25 @@
       class="relative min-h-screen flex flex-col bg-cover bg-center"
       :style="{ backgroundImage: `url(${heroBg})` }"
     >
-      <div class="absolute inset-0 bg-violet-normal/80"/>
+      <div class="absolute inset-0 bg-violet-normal/45"/>
 
       <div class="relative z-10 flex-1 flex items-center">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full py-16 lg:py-24">
           <div class="max-w-2xl">
 
             <h1
-              class="reveal text-h2 text-white mb-6"
-              style="font-size: clamp(2rem, 5vw, 3.75rem);"
+              class="reveal text-h2 text-white font-black mb-6"
+              style="font-size: clamp(2rem, 5vw, 3.75rem); font-weight: 900;"
             >
               Ser PRATI é fazer parte de algo maior
             </h1>
 
-            <p class="reveal reveal-delay-1 text-subtitle-1 text-white/85 mb-10 leading-relaxed">
+            <p class="reveal reveal-delay-1 text-white/90 mb-10 leading-relaxed" style="font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600;">
               Benefícios exclusivos, parceiros de qualidade e uma comunidade
               que cuida de você e sua família.
             </p>
 
-            <div class="reveal reveal-delay-2 flex flex-col sm:flex-row gap-4">
+            <div class="reveal reveal-delay-2 flex flex-col sm:flex-row gap-4 mb-12 lg:mb-16">
               <button
                 class="btn-primary"
                 @click="scrollTo('associe-se')"
@@ -39,30 +39,27 @@
               </button>
             </div>
 
-          </div>
-        </div>
-      </div>
+            <!-- Stats inline na hero, sem barra escura -->
+            <div class="reveal reveal-delay-3 grid grid-cols-3 gap-4 text-left">
 
-      <div class="relative z-10 bg-violet-dark/60 backdrop-blur-sm">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-          <div class="grid grid-cols-3 gap-4 text-center">
+              <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);">1.000+</span>
+                <span class="text-white/80 text-sm">Associados</span>
+              </div>
 
-            <div class="reveal reveal-delay-1 flex flex-col items-center gap-1">
-              <span class="material-icons text-white/80 text-3xl lg:text-4xl">group</span>
-              <span class="text-h5 text-white font-bold" style="font-size: clamp(1.1rem, 2.5vw, 1.5rem);">1.000+</span>
-              <span class="text-caption text-white/70 lg:text-sm">Associados</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);">50+</span>
+                <span class="text-white/80 text-sm">Parceiros</span>
+              </div>
 
-            <div class="reveal reveal-delay-2 flex flex-col items-center gap-1">
-              <span class="material-icons text-white/80 text-3xl lg:text-4xl">handshake</span>
-              <span class="text-h5 text-white font-bold" style="font-size: clamp(1.1rem, 2.5vw, 1.5rem);">50+</span>
-              <span class="text-caption text-white/70 lg:text-sm">Parceiros</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);">30+</span>
+                <span class="text-white/80 text-sm">Anos de História</span>
+              </div>
 
-            <div class="reveal reveal-delay-3 flex flex-col items-center gap-1">
-              <span class="material-icons text-white/80 text-3xl lg:text-4xl">history</span>
-              <span class="text-h5 text-white font-bold" style="font-size: clamp(1.1rem, 2.5vw, 1.5rem);">30+</span>
-              <span class="text-caption text-white/70 lg:text-sm">Anos de História</span>
             </div>
 
           </div>
@@ -331,38 +328,38 @@ onMounted(() => {
 
 <style scoped>
 .btn-primary {
-  background-color: #ffffff;
-  color: #661d75;
+  background: linear-gradient(90deg, #4d1658 0%, #8b30a5 100%);
+  color: #ffffff;
   font-family: "Nunito", sans-serif;
-  font-weight: 600;
+  font-weight: 800;
   font-size: 0.875rem;
   letter-spacing: 1px;
   padding: 0.75rem 1.75rem;
   border-radius: 0.5rem;
-  transition: background-color 0.2s, color 0.2s;
+  transition: opacity 0.2s;
   cursor: pointer;
   white-space: nowrap;
 }
 .btn-primary:hover {
-  background-color: #f0e8f1;
+  opacity: 0.88;
 }
 
 .btn-outline {
-  background-color: transparent;
+  background-color: rgba(102, 29, 117, 0.18);
   color: #ffffff;
   font-family: "Nunito", sans-serif;
-  font-weight: 600;
+  font-weight: 700;
   font-size: 0.875rem;
   letter-spacing: 1px;
   padding: 0.75rem 1.75rem;
   border-radius: 0.5rem;
-  border: 2px solid rgba(255, 255, 255, 0.75);
+  border: 2px solid #a855c8;
   transition: background-color 0.2s, border-color 0.2s;
   cursor: pointer;
   white-space: nowrap;
 }
 .btn-outline:hover {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgba(102, 29, 117, 0.32);
   border-color: #ffffff;
 }