|
|
@@ -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;
|