Sites & Landing Pages
Claude 3.5 Sonnet
Seção de Preços em Bento Grid com Toggle Mensal/Anual
Seção de preços em Bento Grid com toggle mensal/anual com desconto, badges e garantia.
0cópias
0joinhas
0favoritos
O prompt
Construa uma seção de preços (Pricing Section) inovadora em formato Bento Grid utilizando Tailwind CSS e JavaScript puro.
Parâmetros:
- Moeda: {{moeda}}
- Desconto Anual: {{desconto_anual}}% OFF
- Nome do Plano Pro: {{nome_plano_pro}}
Funcionalidades:
1. Switch interativo Mensal / Anual que atualiza dinamicamente os valores dos planos em {{moeda}} sem recarregar a página, destacando o badge {{desconto_anual}}% OFF.
2. Três planos estruturados: Starter, {{nome_plano_pro}} (destaque central com borda gradiente e tag 'Mais Escolhido') e Enterprise.
3. Tooltips informativos nas características de cada plano explicando termos técnicos.
4. Badge de garantia incondicional de 14 dias com ícone de escudo.
5. FAQ embutido logo abaixo com as 3 maiores dúvidas sobre cancelamento e formas de pagamento.
Como usar
- Substitua {{moeda}} ('BRL' ou 'USD'), {{desconto_anual}} (ex.: 20) e {{nome_plano_pro}} (ex.: 'Pro').
- Cole no Claude; a seção é autocontida — embuta em qualquer página que já carregue Tailwind.
- Teste o toggle: os valores atualizam sem recarregar e o badge de desconto destaca quando anual está ativo.
- Ajuste os preços dos planos diretamente no array PLANS no topo do script.
Exemplo de saída
Seção (~200 linhas): switch interativo Mensal/Anual atualizando 3 planos (Starter, Pro com borda gradiente e tag 'Mais Escolhido', Enterprise), tooltips explicando termos técnicos, badge de garantia incondicional de 14 dias com ícone de escudo e FAQ embutido sobre cancelamento e pagamento.