Преглед на файлове

ajustes visuais gerais serprati landingpage

Gustavo Zanatta преди 15 часа
родител
ревизия
f44e136a29
променени са 3 файла, в които са добавени 44 реда и са изтрити 37 реда
  1. 5 5
      app/components/AppFooter.vue
  2. 2 2
      app/components/AppHeader.vue
  3. 37 30
      app/pages/index.vue

+ 5 - 5
app/components/AppFooter.vue

@@ -7,7 +7,7 @@
           <img
             class="h-9 mb-4 brightness-0 invert"
             src="~/assets/images/logo_desktop.svg"
-            alt="Ser Prati"
+            alt="Serprati"
           >
           <p class="text-sm leading-relaxed" style="color: rgba(254,254,254,0.65);">
             Associação dos Servidores — cuidando de você e sua família.
@@ -41,15 +41,15 @@
           <ul class="space-y-3">
             <li class="flex items-center gap-2" style="color: rgba(254,254,254,0.65);">
               <span class="material-icons text-lg leading-none">email</span>
-              <span class="text-sm">contato@serprati.com.br</span>
+              <span class="text-sm">serprati@serprati.com.br</span>
             </li>
             <li class="flex items-center gap-2" style="color: rgba(254,254,254,0.65);">
               <span class="material-icons text-lg leading-none">phone</span>
-              <span class="text-sm">(51) 3000-0000</span>
+              <span class="text-sm">45 99126-6531</span>
             </li>
             <li class="flex items-center gap-2" style="color: rgba(254,254,254,0.65);">
               <span class="material-icons text-lg leading-none">location_on</span>
-              <span class="text-sm">Porto Alegre - RS</span>
+              <span class="text-sm">Toledo - PR</span>
             </li>
           </ul>
         </div>
@@ -60,7 +60,7 @@
     <div class="border-t" style="border-color: rgba(255,255,255,0.1);">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
         <p class="text-center text-xs" style="color: rgba(254,254,254,0.4);">
-          © 2025 SER PRATI. Todos os direitos reservados.
+          © 2026 Serprati. Todos os direitos reservados.
         </p>
       </div>
     </div>

+ 2 - 2
app/components/AppHeader.vue

@@ -7,12 +7,12 @@
         <img
           class="hidden lg:block h-9"
           src="~/assets/images/logo_desktop.svg"
-          alt="Ser Prati"
+          alt="Serprati"
         >
         <img
           class="block lg:hidden h-8"
           src="~/assets/images/logo_mobile.svg"
-          alt="Ser Prati"
+          alt="Serprati"
         >
       </button>
 

+ 37 - 30
app/pages/index.vue

@@ -3,44 +3,45 @@
 
     <section
       id="quem-somos"
-      class="relative min-h-screen flex flex-col bg-cover bg-center"
+      class="relative min-h-screen flex flex-col bg-cover lg:bg-left"
       :style="{ backgroundImage: `url(${heroBg})` }"
     >
       <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 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-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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full pt-8 pb-20 lg:py-18">
+          <div class="flex flex-col lg:flex-row gap-4 lg:gap-12">
 
-            <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')"
-              >
-                ASSOCIE-SE AGORA
-              </button>
-              <button
-                class="btn-outline"
-                @click="scrollTo('beneficios')"
+            <div class="max-w-2xl">
+              <h1
+                class="reveal text-h2 text-white font-black mb-10"
+                style="font-size: clamp(2rem, 5vw, 3.75rem); font-weight: 900;"
               >
-                CONHEÇA OS BENEFÍCIOS
-              </button>
+                Serprati é fazer parte de algo maior
+              </h1>
+
+              <p class="reveal reveal-delay-1 text-white/90 mb-6 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">
+                <button
+                  class="btn-primary"
+                  @click="scrollTo('associe-se')"
+                >
+                  ASSOCIE-SE AGORA
+                </button>
+                <button
+                  class="btn-outline"
+                  @click="scrollTo('beneficios')"
+                >
+                  CONHEÇA OS BENEFÍCIOS
+                </button>
+              </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="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>
@@ -246,7 +247,7 @@
 <script setup lang="ts">
 import heroBg from '~/assets/images/imagem_fundo.png'
 
-useHead({ title: 'Ser Prati — Associação dos Servidores' })
+useHead({ title: 'Serprati' })
 definePageMeta({ layout: 'default' })
 
 const scrollTo = (id: string) => {
@@ -418,6 +419,12 @@ onMounted(() => {
 </script>
 
 <style scoped>
+@media (max-width: 1023px) {
+  #quem-somos {
+    background-position: 8% 65%;
+  }
+}
+
 .btn-primary {
   background: linear-gradient(90deg, #4d1658 0%, #8b30a5 100%);
   color: #ffffff;