|
|
@@ -1,16 +1,469 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div class="flex justify-center items-center h-[calc(100vh-126px)]">
|
|
|
- <p class="text-text text-xl font-semibold">Serprati Landing Page</p>
|
|
|
- </div>
|
|
|
+
|
|
|
+ <section
|
|
|
+ id="quem-somos"
|
|
|
+ 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>
|
|
|
+
|
|
|
+ <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);"
|
|
|
+ >
|
|
|
+ Ser PRATI é fazer parte de algo maior
|
|
|
+ </h1>
|
|
|
+
|
|
|
+ <p class="reveal reveal-delay-1 text-subtitle-1 text-white/85 mb-10 leading-relaxed">
|
|
|
+ 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
|
|
|
+ @click="scrollTo('associe-se')"
|
|
|
+ class="btn-primary"
|
|
|
+ >
|
|
|
+ ASSOCIE-SE AGORA
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ @click="scrollTo('beneficios')"
|
|
|
+ class="btn-outline"
|
|
|
+ >
|
|
|
+ CONHEÇA OS BENEFÍCIOS
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <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="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="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="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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section id="beneficios" 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">
|
|
|
+ <h2 class="text-h4 text-text" style="font-size: clamp(1.5rem, 3vw, 2.125rem);">
|
|
|
+ Benefícios para você
|
|
|
+ </h2>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-for="(benefit, index) in benefits"
|
|
|
+ :key="benefit.title"
|
|
|
+ :class="`reveal reveal-delay-${index + 1}`"
|
|
|
+ class="benefit-card"
|
|
|
+ >
|
|
|
+ <div class="benefit-icon-wrap">
|
|
|
+ <span class="material-icons text-violet-normal text-2xl">{{ benefit.icon }}</span>
|
|
|
+ </div>
|
|
|
+ <h3 class="text-subtitle-1 font-semibold text-text mt-4 mb-2">
|
|
|
+ {{ benefit.title }}
|
|
|
+ </h3>
|
|
|
+ <p class="text-body-2 text-text-2 leading-relaxed">
|
|
|
+ {{ benefit.description }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section id="associe-se" class="bg-violet-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-10 lg:mb-12">
|
|
|
+ <h2 class="text-h4 text-text" style="font-size: clamp(1.5rem, 3vw, 2.125rem);">
|
|
|
+ Associe-se
|
|
|
+ </h2>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="reveal reveal-delay-1 max-w-3xl mx-auto">
|
|
|
+
|
|
|
+ <div class="mb-0">
|
|
|
+ <button class="tab-active">
|
|
|
+ NOVA ASSOCIAÇÃO
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="bg-white rounded-b-2xl rounded-tr-2xl shadow-md p-6 lg:p-10">
|
|
|
+ <form @submit.prevent="handleSubmit" novalidate>
|
|
|
+
|
|
|
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-5 mb-6">
|
|
|
+
|
|
|
+ <div class="field-group">
|
|
|
+ <label class="field-label">Nome Completo</label>
|
|
|
+ <div class="field-input-wrap">
|
|
|
+ <span class="material-icons field-icon">person</span>
|
|
|
+ <input
|
|
|
+ v-model="form.nomeCompleto"
|
|
|
+ type="text"
|
|
|
+ placeholder="Seu Nome"
|
|
|
+ class="field-input"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="field-group">
|
|
|
+ <label class="field-label">CPF</label>
|
|
|
+ <div class="field-input-wrap">
|
|
|
+ <span class="material-icons field-icon">badge</span>
|
|
|
+ <input
|
|
|
+ :value="form.cpf"
|
|
|
+ @input="handleCPF"
|
|
|
+ type="text"
|
|
|
+ placeholder="000.000.000-00"
|
|
|
+ maxlength="14"
|
|
|
+ class="field-input"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="field-group">
|
|
|
+ <label class="field-label">E-mail</label>
|
|
|
+ <div class="field-input-wrap">
|
|
|
+ <span class="material-icons field-icon">email</span>
|
|
|
+ <input
|
|
|
+ v-model="form.email"
|
|
|
+ type="email"
|
|
|
+ placeholder="nome@conta.com"
|
|
|
+ class="field-input"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="field-group">
|
|
|
+ <label class="field-label">Telefone</label>
|
|
|
+ <div class="field-input-wrap">
|
|
|
+ <span class="material-icons field-icon">phone</span>
|
|
|
+ <input
|
|
|
+ v-model="form.telefone"
|
|
|
+ type="tel"
|
|
|
+ placeholder="00000000"
|
|
|
+ class="field-input"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="field-group">
|
|
|
+ <label class="field-label">Cargo</label>
|
|
|
+ <div class="field-input-wrap">
|
|
|
+ <span class="material-icons field-icon">work</span>
|
|
|
+ <input
|
|
|
+ v-model="form.cargo"
|
|
|
+ type="text"
|
|
|
+ placeholder="Assistente Financeiro"
|
|
|
+ class="field-input"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="field-group">
|
|
|
+ <label class="field-label">Setor</label>
|
|
|
+ <div class="field-input-wrap">
|
|
|
+ <span class="material-icons field-icon">business</span>
|
|
|
+ <input
|
|
|
+ v-model="form.setor"
|
|
|
+ type="text"
|
|
|
+ placeholder="Financeiro"
|
|
|
+ class="field-input"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex justify-center">
|
|
|
+ <button type="submit" class="btn-submit">
|
|
|
+ ENVIAR SOLICITAÇÃO
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <Transition name="toast">
|
|
|
+ <div
|
|
|
+ v-if="showSuccess"
|
|
|
+ class="fixed bottom-6 right-6 z-50 bg-violet-normal text-white px-5 py-4 rounded-xl shadow-xl flex items-center gap-3"
|
|
|
+ >
|
|
|
+ <span class="material-icons text-xl">check_circle</span>
|
|
|
+ <span class="text-sm font-medium">Solicitação enviada com sucesso!</span>
|
|
|
+ </div>
|
|
|
+ </Transition>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-useHead({
|
|
|
- title: `Landing Page - Serprati`
|
|
|
+import heroBg from '~/assets/images/imagem_fundo.png'
|
|
|
+
|
|
|
+useHead({ title: 'Ser Prati — Associação dos Servidores' })
|
|
|
+definePageMeta({ layout: 'default' })
|
|
|
+
|
|
|
+const scrollTo = (id: string) => {
|
|
|
+ document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })
|
|
|
+}
|
|
|
+
|
|
|
+const benefits = [
|
|
|
+ {
|
|
|
+ icon: 'local_offer',
|
|
|
+ title: 'Descontos Exclusivos',
|
|
|
+ description: 'Até 50% de desconto em parceiros selecionados.',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'health_and_safety',
|
|
|
+ title: 'Convênios Médicos',
|
|
|
+ description: 'Planos de saúde com condições especiais.',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'store',
|
|
|
+ title: 'Loja do Associado',
|
|
|
+ description: 'Produtos com preços diferenciados.',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'badge',
|
|
|
+ title: 'Carteirinha Digital',
|
|
|
+ description: 'Acesso rápido aos benefícios pelo celular.',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'notifications',
|
|
|
+ title: 'Notificações',
|
|
|
+ description: 'Fique por dentro das novidades e promoções.',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'family_restroom',
|
|
|
+ title: 'Dependentes',
|
|
|
+ description: 'Inclua sua família nos benefícios.',
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+const form = reactive({
|
|
|
+ nomeCompleto: '',
|
|
|
+ cpf: '',
|
|
|
+ email: '',
|
|
|
+ telefone: '',
|
|
|
+ cargo: '',
|
|
|
+ setor: '',
|
|
|
+})
|
|
|
+
|
|
|
+const formatCPF = (value: string): string => {
|
|
|
+ return value
|
|
|
+ .replace(/\D/g, '')
|
|
|
+ .replace(/(\d{3})(\d)/, '$1.$2')
|
|
|
+ .replace(/(\d{3})(\d)/, '$1.$2')
|
|
|
+ .replace(/(\d{3})(\d{1,2})$/, '$1-$2')
|
|
|
+ .slice(0, 14)
|
|
|
+}
|
|
|
+
|
|
|
+const handleCPF = (e: Event) => {
|
|
|
+ form.cpf = formatCPF((e.target as HTMLInputElement).value)
|
|
|
+}
|
|
|
+
|
|
|
+const showSuccess = ref(false)
|
|
|
+
|
|
|
+const handleSubmit = () => {
|
|
|
+ console.log({ ...form })
|
|
|
+ showSuccess.value = true
|
|
|
+ setTimeout(() => { showSuccess.value = false }, 4000)
|
|
|
+ Object.assign(form, {
|
|
|
+ nomeCompleto: '',
|
|
|
+ cpf: '',
|
|
|
+ email: '',
|
|
|
+ telefone: '',
|
|
|
+ cargo: '',
|
|
|
+ setor: '',
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ const observer = new IntersectionObserver(
|
|
|
+ (entries) => {
|
|
|
+ entries.forEach((entry) => {
|
|
|
+ if (entry.isIntersecting) {
|
|
|
+ entry.target.classList.add('is-visible')
|
|
|
+ observer.unobserve(entry.target)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ { threshold: 0.1, rootMargin: '0px 0px -40px 0px' }
|
|
|
+ )
|
|
|
+
|
|
|
+ document.querySelectorAll('.reveal').forEach((el) => observer.observe(el))
|
|
|
})
|
|
|
-definePageMeta({
|
|
|
- layout: 'default',
|
|
|
-});
|
|
|
</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.btn-primary {
|
|
|
+ background-color: #ffffff;
|
|
|
+ color: #661d75;
|
|
|
+ font-family: "Nunito", sans-serif;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 0.875rem;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ padding: 0.75rem 1.75rem;
|
|
|
+ border-radius: 0.5rem;
|
|
|
+ transition: background-color 0.2s, color 0.2s;
|
|
|
+ cursor: pointer;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+.btn-primary:hover {
|
|
|
+ background-color: #f0e8f1;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-outline {
|
|
|
+ background-color: transparent;
|
|
|
+ color: #ffffff;
|
|
|
+ font-family: "Nunito", sans-serif;
|
|
|
+ font-weight: 600;
|
|
|
+ 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);
|
|
|
+ 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);
|
|
|
+ border-color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.benefit-card {
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 1rem;
|
|
|
+ padding: 1.75rem;
|
|
|
+ box-shadow: 0 2px 12px rgba(102, 29, 117, 0.07);
|
|
|
+ transition: box-shadow 0.2s, transform 0.2s;
|
|
|
+}
|
|
|
+.benefit-card:hover {
|
|
|
+ box-shadow: 0 6px 24px rgba(102, 29, 117, 0.13);
|
|
|
+ transform: translateY(-2px);
|
|
|
+}
|
|
|
+.benefit-icon-wrap {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ background-color: #f0e8f1;
|
|
|
+ border-radius: 0.75rem;
|
|
|
+}
|
|
|
+
|
|
|
+.tab-active {
|
|
|
+ background-color: #661d75;
|
|
|
+ color: #ffffff;
|
|
|
+ font-family: "Nunito", sans-serif;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 0.75rem;
|
|
|
+ letter-spacing: 1.25px;
|
|
|
+ padding: 0.625rem 1.5rem;
|
|
|
+ border-radius: 0.5rem 0.5rem 0 0;
|
|
|
+ cursor: default;
|
|
|
+}
|
|
|
+
|
|
|
+.field-group {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 0.375rem;
|
|
|
+}
|
|
|
+.field-label {
|
|
|
+ font-family: "Nunito", sans-serif;
|
|
|
+ font-size: 0.8125rem;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #505050;
|
|
|
+}
|
|
|
+.field-input-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 0.5rem;
|
|
|
+ border: 1.5px solid #C0C0C0;
|
|
|
+ border-radius: 0.5rem;
|
|
|
+ padding: 0.5rem 0.75rem;
|
|
|
+ background-color: #fefefe;
|
|
|
+ transition: border-color 0.2s;
|
|
|
+}
|
|
|
+.field-input-wrap:focus-within {
|
|
|
+ border-color: #661d75;
|
|
|
+}
|
|
|
+.field-icon {
|
|
|
+ font-size: 1.125rem;
|
|
|
+ color: #b6b6b6;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+.field-input {
|
|
|
+ flex: 1;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ background: transparent;
|
|
|
+ font-family: "Nunito", sans-serif;
|
|
|
+ font-size: 0.875rem;
|
|
|
+ color: #161616;
|
|
|
+}
|
|
|
+.field-input::placeholder {
|
|
|
+ color: #b6b6b6;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-submit {
|
|
|
+ background-color: #661d75;
|
|
|
+ color: #ffffff;
|
|
|
+ font-family: "Nunito", sans-serif;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 0.875rem;
|
|
|
+ letter-spacing: 1.25px;
|
|
|
+ padding: 0.875rem 3rem;
|
|
|
+ border-radius: 0.5rem;
|
|
|
+ transition: background-color 0.2s;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.btn-submit:hover {
|
|
|
+ background-color: #5c1a69;
|
|
|
+}
|
|
|
+
|
|
|
+.toast-enter-active,
|
|
|
+.toast-leave-active {
|
|
|
+ transition: opacity 0.4s ease, transform 0.4s ease;
|
|
|
+}
|
|
|
+.toast-enter-from,
|
|
|
+.toast-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateY(12px);
|
|
|
+}
|
|
|
+</style>
|
