From c22da8c376da07c8152c46dacfa88c981e7e16d3 Mon Sep 17 00:00:00 2001
From: gmbueno <gmbueno1802@gmail.com>
Date: Wed, 20 Mar 2024 15:39:21 -0300
Subject: [PATCH] add rota oculta para plano individual

---
 src/comps/PricingAll.vue                    |  6 +-
 src/comps/PricingComercial.vue              | 99 +++++++++++++++++++++
 src/comps/PricingIndividual.vue             | 81 ++++++++++++-----
 src/router/index.js                         |  8 +-
 src/views/pricing/PlanosIndividuais.vue     | 96 ++++++++++++++++++++
 src/views/pricing/Precos.vue                | 68 --------------
 src/views/products/APIs/Bolsa.vue           |  6 +-
 src/views/products/APIs/Fundos.vue          |  6 +-
 src/views/products/APIs/TitulosPublicos.vue |  6 +-
 9 files changed, 271 insertions(+), 105 deletions(-)
 create mode 100644 src/comps/PricingComercial.vue
 create mode 100644 src/views/pricing/PlanosIndividuais.vue

diff --git a/src/comps/PricingAll.vue b/src/comps/PricingAll.vue
index 77753d01..9b648cc9 100644
--- a/src/comps/PricingAll.vue
+++ b/src/comps/PricingAll.vue
@@ -7,7 +7,7 @@
     <div class="columns">
       <div class="column is-2"></div>
       <div class="column is-8">
-        <PricingIndividual/>
+        <PricingComercial/>
       </div>
       <div class="column is-2"></div>
     </div>
@@ -17,13 +17,13 @@
 </template>
 
 <script>
-import PricingIndividual from '@/comps/PricingIndividual'
+import PricingComercial from '@/comps/PricingComercial'
 
 export default {
   name: 'PricingAll',
 
   components: {
-    PricingIndividual
+    PricingComercial
   },
 
   props: {
diff --git a/src/comps/PricingComercial.vue b/src/comps/PricingComercial.vue
new file mode 100644
index 00000000..94686427
--- /dev/null
+++ b/src/comps/PricingComercial.vue
@@ -0,0 +1,99 @@
+<template>
+  <!-- <div
+    class="my-5 tabs is-toggle is-toggle-rounded is-centered is-medium mb-0">
+    <ul>
+      <li :class="{ 'is-active': !showAnual }">
+        <a @click="showAnual = false">
+          <span>Plano mensal</span>
+        </a>
+      </li>
+      <li :class="{ 'is-active': showAnual }">
+        <a @click="showAnual = true">
+          <span>Plano anual</span>
+        </a>
+      </li>
+    </ul>
+  </div> -->
+
+  <div class="columns is-centered">
+    <div class="column is-two-thirds">
+      <div class="box" style="height: 38rem">
+        <p class="is-size-6 has-text-weight-bold"> Uso Comercial </p>
+        <p class="is-size-3 has-text-weight-bold has-text-black"> Enterprise </p>
+        <p class="is-size-6 is-italic"> Production Ready </p>
+        <hr/>
+        <div class="has-text-centered mb-2 pr-5">
+          <button
+            @click="$router.push('/contato')"
+            class="button button-full-width is-size-6 is-primary has-text-white is-full has-text-weight-bold">
+            Entrar em contato
+          </button>
+        </div>
+        <br>
+        <CheckmarkItemComp/><span class="is-size-6" style="line-height: 200%">API Bolsa, Fundos, Tesouro, Índices e Taxas</span><br>
+        <CheckmarkItemComp/><span class="is-size-6" style="line-height: 200%">Histórico cotações fim de dia (inclusive ajustadas)</span><br>
+        <CheckmarkItemComp/><span class="is-size-6" style="line-height: 200%">Histórico de dividendos, JCP, splits/inplits e bonificações</span><br>
+        <CheckmarkItemComp/><span class="is-size-6" style="line-height: 200%">Histórico de +50 indicadores</span><br>
+        <CheckmarkItemComp/><span class="is-size-6" style="line-height: 200%">Histórico de resultados (BP, DRE, DFC) padronizados</span><br>
+        <CheckmarkItemComp/><span class="is-size-6" style="line-height: 200%">Número de chamadas customizado</span><br>
+        <CheckmarkItemComp/><span class="is-size-6" style="line-height: 200%">Suporte premium e técnico</span><br>
+        <CheckmarkItemComp/><span class="is-size-6" style="line-height: 200%">Ícones e logos dos ativos</span><br>
+        <CheckmarkItemComp/><span class="is-size-6" style="line-height: 200%">Base backtest sem vieses</span><br>
+        <CheckmarkItemComp/><span class="is-size-6" style="line-height: 200%">Acesso antecipado a novas funcionalidades</span><br>
+        <span class="is-size-7 pointer is-underlined" @click="$router.push('/FAQ')" style="line-height: 400%">Clique para entender porque a Fintz é a melhor opção</span><br>
+      </div>
+      <div clas="has-text-centered">
+        <span class="is-size-7">Plano individual? Para uso não comercial, adquira nosso plano&nbsp;</span>
+        <span class="is-size-7 pointer is-underlined" @click="redirectAssinarMensal">mensal</span>
+        <span class="is-size-7">&nbsp;ou&nbsp;</span>
+        <span class="is-size-7 pointer is-underlined" @click="redirectAssinarAnual">anual</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CheckmarkItemComp from '@/comps/CheckmarkItemComp'
+
+export default {
+  name: 'BenefitsComp',
+
+  components: {
+    CheckmarkItemComp
+  },
+
+  data () {
+    return {
+      showAnual: true
+    }
+  },
+
+  methods: {
+    redirectAssinarMensal () {
+      this.$gtag.event('click-assinar-mensal', { event_category: this.$route.name })
+      window.location.href = 'https://www.asaas.com/c/220760563882'
+    },
+    redirectAssinarAnual () {
+      this.$gtag.event('click-assinar-anual', { event_category: this.$route.name })
+      window.location.href = 'https://www.asaas.com/c/567105707020'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .pointer {
+    cursor: pointer
+  }
+  .button-full-width {
+    padding-left: 28%;
+    padding-right: 28%;
+  }
+
+  .strikethrough {
+  text-decoration: line-through;
+  text-decoration-thickness: 2px;  /* Adjust thickness as desired */
+  /* text-decoration-color: black; Adjust color for more visibility, if desired */
+}
+
+</style>
diff --git a/src/comps/PricingIndividual.vue b/src/comps/PricingIndividual.vue
index 475b89d3..3b6d0fc6 100644
--- a/src/comps/PricingIndividual.vue
+++ b/src/comps/PricingIndividual.vue
@@ -1,5 +1,5 @@
 <template>
-  <!-- <div
+  <div
     class="my-5 tabs is-toggle is-toggle-rounded is-centered is-medium mb-0">
     <ul>
       <li :class="{ 'is-active': !showAnual }">
@@ -13,34 +13,69 @@
         </a>
       </li>
     </ul>
-  </div> -->
+  </div>
 
   <div class="columns is-centered">
-    <div class="column is-two-thirds">
-      <div class="box" style="height: 38rem">
-        <p class="is-size-6 has-text-weight-bold"> Uso Comercial </p>
-        <p class="is-size-3 has-text-weight-bold has-text-black"> Enterprise </p>
-        <p class="is-size-6 is-italic"> Production Ready </p>
+    <div class="column is-one-third">
+      <div class="box" style="height: 37rem">
+        <p class="is-size-7 has-text-weight-bold"> Plano individual </p>
+        <p class="is-size-5 has-text-weight-bold has-text-black"> Padrão </p>
+        <p class="is-size-7"> Ótimo projetos pessoais </p>
         <hr/>
+        <div class="mb-1">
+          <span v-if="!showAnual" class="is-size-5 has-text-gray has-text-weight-bold strikethrough"> De R$85,00 / mês </span>
+          <span v-if="showAnual" class="is-size-5 has-text-gray has-text-weight-bold strikethrough"> De R$1.020,00 / ano </span>
+        </div>
+          <div class="mb-1">
+          <span v-if="!showAnual" class="is-size-4 has-text-black has-text-weight-bold"> R$29,90 </span>
+          <span v-if="showAnual" class="is-size-4 has-text-black has-text-weight-bold"> R$299,00 </span>
+          <span v-if="!showAnual">/mês</span>
+          <span v-if="showAnual">/ano</span>
+        </div>
+        <div class="has-text-centered mb-2">
+          <button v-if="!showAnual" @click="redirectAssinarMensal" class="button button-full-width is-size-7 is-primary has-text-white is-full has-text-weight-bold"> Assinar agora </button>
+          <button v-if="showAnual" @click="redirectAssinarAnual" class="button button-full-width is-size-7 is-primary has-text-white is-full has-text-weight-bold"> Assinar agora </button>
+        </div>
+        <CheckmarkItemComp text="3.000 chamadas / mês"/> <br>
+        <CheckmarkItemComp text="API Bolsa B3"/> <br>
+        <CheckmarkItemComp text="API Fundos"/> <br>
+        <CheckmarkItemComp text="API Tesouro Direto"/> <br>
+        <CheckmarkItemComp text="API Índices, Taxas e Câmbio"/> <br>
+        <CheckmarkItemComp text="Histórico cotações (+10 anos)"/> <br>
+        <CheckmarkItemComp text="Base ajustada e padronizada"/> <br>
+        <CheckmarkItemComp text="Proventos, splits e bonificações"/> <br>
+        <CheckmarkItemComp text="Indicadores anuais e trimestrais"/> <br>
+        <CheckmarkItemComp text="DRE, DFC e BPs padronizados"/> <br>
+        <CheckmarkItemComp text="Balanços trimestrais e anuais"/> <br>
+        <CheckmarkItemComp text="Plugin Excel/Sheets (em breve)"/> <br>
+      </div>
+    </div>
+    <div class="column is-one-third">
+      <div class="box" style="height: 37rem">
+        <p class="is-size-7 has-text-weight-bold"> Plano comercial </p>
+        <p class="is-size-5 has-text-weight-bold has-text-black"> Enterprise </p>
+        <p class="is-size-7"> Para escalar seu negócio</p>
+        <hr/>
+        <div class="mb-1">
+          <span class="is-size-5 has-text-black has-text-weight-bold"> Sob consulta </span>
+          <!-- <span> Entre em contato. </span> -->
+        </div>
+        <div class="mb-4">
+          <span class="is-size-6 has-text-gray has-text-weight-bold"> Precificação customizada </span>
+          <!-- <span> Entre em contato. </span> -->
+        </div>
         <div class="has-text-centered mb-2 pr-5">
           <button
-            @click="$router.push('/contato')"
-            class="button button-full-width is-size-6 is-primary has-text-white is-full has-text-weight-bold">
+            @click="$router.push('/comecar-a-usar')"
+            class="button button-full-width is-size-7 is-primary has-text-white is-full has-text-weight-bold">
             Entrar em contato
           </button>
         </div>
-        <br>
-        <CheckmarkItemComp/><span class="is-size-6" style="line-height: 200%">API Bolsa, Fundos, Tesouro, Índices e Taxas</span><br>
-        <CheckmarkItemComp/><span class="is-size-6" style="line-height: 200%">Histórico cotações fim de dia (inclusive ajustadas)</span><br>
-        <CheckmarkItemComp/><span class="is-size-6" style="line-height: 200%">Histórico de dividendos, JCP, splits/inplits e bonificações</span><br>
-        <CheckmarkItemComp/><span class="is-size-6" style="line-height: 200%">Histórico de +50 indicadores</span><br>
-        <CheckmarkItemComp/><span class="is-size-6" style="line-height: 200%">Histórico de resultados (BP, DRE, DFC) padronizados</span><br>
-        <CheckmarkItemComp/><span class="is-size-6" style="line-height: 200%">Número de chamadas customizado</span><br>
-        <CheckmarkItemComp/><span class="is-size-6" style="line-height: 200%">Suporte premium e técnico</span><br>
-        <CheckmarkItemComp/><span class="is-size-6" style="line-height: 200%">Ícones e logos dos ativos</span><br>
-        <CheckmarkItemComp/><span class="is-size-6" style="line-height: 200%">Base backtest sem vieses</span><br>
-        <CheckmarkItemComp/><span class="is-size-6" style="line-height: 200%">Acesso antecipado a novas funcionalidades</span><br>
-        <span class="is-size-7 pointer is-underlined" @click="$router.push('/FAQ')" style="line-height: 400%">Clique para entender porque a Fintz é a melhor opção</span><br>
+        <CheckmarkItemComp text="Tudo do plano Padrão"/> <br>
+        <CheckmarkItemComp text="Chamadas ilimitadas"/> <br>
+        <CheckmarkItemComp text="Suporte premium e técnico"/> <br>
+        <CheckmarkItemComp text="Soluções customizadas"/> <br>
+        <CheckmarkItemComp text="Desenvolvimento de features"/> <br>
       </div>
     </div>
   </div>
@@ -64,11 +99,9 @@ export default {
 
   methods: {
     redirectAssinarMensal () {
-      this.$gtag.event('click-assinar-mensal', { event_category: this.$route.name })
       window.location.href = 'https://www.asaas.com/c/220760563882'
     },
     redirectAssinarAnual () {
-      this.$gtag.event('click-assinar-anual', { event_category: this.$route.name })
       window.location.href = 'https://www.asaas.com/c/567105707020'
     }
   }
@@ -90,4 +123,4 @@ export default {
   /* text-decoration-color: black; Adjust color for more visibility, if desired */
 }
 
-</style>
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index ac83526d..9200aad1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -54,12 +54,18 @@ const routes = [
     name: 'EmailSent',
     component: () => import('@/views/EmailSent')
   },
-  // pricing
+  // pricing comercial
   {
     path: '/precos',
     name: 'Preços',
     component: () => import('@/views/pricing/Precos')
   },
+  // pricing individual
+  {
+    path: '/planos-individuais',
+    name: 'Planos Individuais',
+    component: () => import('@/views/pricing/PlanosIndividuais')
+  },
   {
     path: '/startups',
     name: 'Startups',
diff --git a/src/views/pricing/PlanosIndividuais.vue b/src/views/pricing/PlanosIndividuais.vue
new file mode 100644
index 00000000..7ff63b79
--- /dev/null
+++ b/src/views/pricing/PlanosIndividuais.vue
@@ -0,0 +1,96 @@
+<template>
+<div style="max-width: 100%; overflow-x: hidden" class="has-background-white">
+<NavbarComp />
+
+<section>
+  <div class="container px-6">
+    <figure>
+      <img src="@/assets/candle.png"/>
+    </figure>
+  </div>
+</section>
+
+<PricingIndividual/>
+
+<section class="section py-0 px-0" id="modelo-customizavel">
+  <div class="hero-body">
+    <div class="container">
+      <p class="title is-3 has-text-black">Modelo de negócios diferente?</p>
+      <p class="subtitle is-6 mb-0">
+        Caso você cobre por usuário, por acesso, ou qualquer outra maneira, nós vamos montar o plano ideal para você.
+      </p>
+      <p>
+        Entre em contato e vamos ajudar: contato@fintz.com.br
+      </p>
+    </div>
+  </div>
+</section>
+
+<ClientsStories/>
+
+<section class="section my-6" id="vantagens-fintz">
+  <div class="container has-text-centered">
+    <span class="subtitle is-2 has-text-black"> Vantagens de usar a Fintz </span>
+      <div class="columns mt-5">
+
+        <BenefitsComp/>
+    </div>
+  </div>
+</section>
+
+<ClientsTestimonies/>
+
+<ContactForm/>
+
+<FooterComp />
+
+</div>
+</template>
+
+<script>
+import FooterComp from '@/comps/FooterComp'
+import NavbarComp from '@/comps/NavbarComp'
+import ContactForm from '@/comps/ContactForm'
+import PricingIndividual from '@/comps/PricingIndividual'
+import ClientsStories from '@/comps/ClientsStories'
+import ClientsTestimonies from '@/comps/ClientsTestimonies'
+import BenefitsComp from '@/comps/BenefitsComp'
+
+export default {
+  name: 'App',
+
+  components: {
+    FooterComp,
+    NavbarComp,
+    ContactForm,
+    ClientsStories,
+    ClientsTestimonies,
+    BenefitsComp,
+    PricingIndividual
+  }
+}
+</script>
+
+<style scoped>
+#section1 {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  /* background-image: url("../assets/back_light4.jpg");
+  background-image: url("../assets/back_dark.jpg"); */
+  /* text-shadow: 1px 1px 1px #313338; */
+}
+.list {
+  display: list-item;
+  list-style-type: disc;
+  list-style-position: inside;
+}
+.my-img {
+  max-height: 10rem;
+  max-width: 10rem
+}
+
+.black-line {
+  background-color: #444
+}
+</style>
diff --git a/src/views/pricing/Precos.vue b/src/views/pricing/Precos.vue
index 5b4e43f0..0341e50c 100644
--- a/src/views/pricing/Precos.vue
+++ b/src/views/pricing/Precos.vue
@@ -11,51 +11,6 @@
 </section>
 
 <PricingAll/>
-<!--
-<section class="section" id="opcoes-planos">
-  <div class="container has-text-centered">
-    <span class="title is-4"> Opções de preços simples e flexíveis </span>
-      <div class="columns mt-3">
-
-        <div class="column is-one-third">
-          <div class="is-flex is-justify-content-center pb-3">
-            <figure class="image is-64x64">
-              <img src="@/assets/icons/pricing/use.png" alt="Placeholder image">
-            </figure>
-          </div>
-          <p class="title is-5">Pagamento conforme o uso</p>
-          <p class="subtitle is-6">
-            Preços simples baseados no uso significam que você não ficará preso a grandes contratos.
-          </p>
-        </div>
-
-        <div class="column is-one-third">
-          <div class="is-flex is-justify-content-center pb-3">
-            <figure class="image is-64x64">
-              <img src="@/assets/icons/pricing/volume.png" alt="Placeholder image">
-            </figure>
-          </div>
-          <p class="title is-5">Descontos por volume</p>
-          <p class="subtitle is-6">
-            Os descontos são acionados à medida que seu uso aumenta, para que você sempre tenha um preço justo.
-          </p>
-        </div>
-
-        <div class="column is-one-third">
-          <div class="is-flex is-justify-content-center pb-3">
-            <figure class="image is-64x64">
-              <img src="@/assets/icons/pricing/loyalclient.png" alt="Placeholder image">
-            </figure>
-          </div>
-          <p class="title is-5">Preços especiais para clientes fixos</p>
-          <p class="subtitle is-6">
-            Fale com nossa equipe de vendas para maiores descontos com base em compromisso de uso.
-          </p>
-        </div>
-
-    </div>
-  </div>
-</section> -->
 
 <section class="section py-0 px-0" id="modelo-customizavel">
   <div class="hero-body">
@@ -73,29 +28,6 @@
 
 <ClientsStories/>
 
-<!-- <section>
-  <div class="container is-fluid">
-    <div class="box m-5 p-5" style="border: 1px solid lightgray; box-shadow: none;">
-      <div class="columns mx-5">
-        <div class="column">
-          <h1 class="title is-2 has-text-primary">Fintz para startups</h1>
-          <span class="pt-1 has-text-black">
-            No programa Fintz para Startups, as empresas recebem créditos de API e recursos da Fintz para escalar suas soluções.
-          </span>
-        </div>
-        <div class="column is-narrow is-flex is-align-items-center">
-          <a
-            class="button has-text-black"
-            style="background-color: #98C6FF; border-color: lightgray;"
-            @click="$router.push('/startups')">
-            Conhecer Fintz para startups
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</section> -->
-
 <section class="section my-6" id="vantagens-fintz">
   <div class="container has-text-centered">
     <span class="subtitle is-2 has-text-black"> Vantagens de usar a Fintz </span>
diff --git a/src/views/products/APIs/Bolsa.vue b/src/views/products/APIs/Bolsa.vue
index f6db2bc1..38f543d9 100644
--- a/src/views/products/APIs/Bolsa.vue
+++ b/src/views/products/APIs/Bolsa.vue
@@ -165,7 +165,7 @@
     <div class="columns">
       <div class="column is-2"></div>
       <div class="column is-8">
-        <PricingIndividual/>
+        <PricingComercial/>
       </div>
       <div class="column is-2"></div>
     </div>
@@ -183,7 +183,7 @@ import FooterComp from '@/comps/FooterComp'
 import NavbarComp from '@/comps/NavbarComp'
 import ContactForm from '@/comps/ContactForm'
 import PartnersComp from '@/comps/PartnersComp'
-import PricingIndividual from '@/comps/PricingIndividual'
+import PricingComercial from '@/comps/PricingComercial'
 import BolsaIndicadores from '@/comps/code/BolsaIndicadores'
 import BolsaInfosGerais from '@/comps/code/BolsaInfosGerais'
 
@@ -195,7 +195,7 @@ export default {
     NavbarComp,
     ContactForm,
     PartnersComp,
-    PricingIndividual,
+    PricingComercial,
     BolsaIndicadores,
     BolsaInfosGerais
   }
diff --git a/src/views/products/APIs/Fundos.vue b/src/views/products/APIs/Fundos.vue
index f52f3385..2deac436 100644
--- a/src/views/products/APIs/Fundos.vue
+++ b/src/views/products/APIs/Fundos.vue
@@ -167,7 +167,7 @@
     <div class="columns">
       <div class="column is-2"></div>
       <div class="column is-8">
-        <PricingIndividual/>
+        <PricingComercial/>
       </div>
       <div class="column is-2"></div>
     </div>
@@ -185,7 +185,7 @@ import FooterComp from '@/comps/FooterComp'
 import NavbarComp from '@/comps/NavbarComp'
 import ContactForm from '@/comps/ContactForm'
 import PartnersComp from '@/comps/PartnersComp'
-import PricingIndividual from '@/comps/PricingIndividual'
+import PricingComercial from '@/comps/PricingComercial'
 import FundosInfosEssenciais from '@/comps/code/FundosInfosEssenciais'
 import FundosInfosDiarias from '@/comps/code/FundosInfosDiarias'
 import FundosRetornoHistorico from '@/comps/code/FundosRetornoHistorico'
@@ -198,7 +198,7 @@ export default {
     NavbarComp,
     ContactForm,
     PartnersComp,
-    PricingIndividual,
+    PricingComercial,
     FundosInfosEssenciais,
     FundosInfosDiarias,
     FundosRetornoHistorico
diff --git a/src/views/products/APIs/TitulosPublicos.vue b/src/views/products/APIs/TitulosPublicos.vue
index 5c7c6805..6ac86242 100644
--- a/src/views/products/APIs/TitulosPublicos.vue
+++ b/src/views/products/APIs/TitulosPublicos.vue
@@ -164,7 +164,7 @@
     <div class="columns">
       <div class="column is-2"></div>
       <div class="column is-8">
-        <PricingIndividual/>
+        <PricingComercial/>
       </div>
       <div class="column is-2"></div>
     </div>
@@ -184,7 +184,7 @@ import PartnersComp from '@/comps/PartnersComp'
 import TesouroLista from '@/comps/code/TesouroLista'
 import TesouroInfosDiarias from '@/comps/code/TesouroInfosDiarias'
 import TesouroInfosHistoricas from '@/comps/code/TesouroInfosHistoricas'
-import PricingIndividual from '@/comps/PricingIndividual'
+import PricingComercial from '@/comps/PricingComercial'
 
 export default {
   name: 'App',
@@ -197,7 +197,7 @@ export default {
     TesouroLista,
     TesouroInfosDiarias,
     TesouroInfosHistoricas,
-    PricingIndividual
+    PricingComercial
   }
 }
 </script>