From 984855e36cb62dadb85fa28cab64a08507c6ea47 Mon Sep 17 00:00:00 2001 From: marcoitaloesp-ai Date: Wed, 17 Dec 2025 19:44:12 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20Landing=20page=20p=C3=BAblica=20+=20Reg?= =?UTF-8?q?istro=20com=20sele=C3=A7=C3=A3o=20de=20plano?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Nova Landing Page institucional em / - Seções: Hero, Features, Pricing, FAQ, CTA, Footer - Pricing integrado com API de planos - Register.jsx agora suporta seleção de plano - Parâmetro ?plan=slug na URL do registro - Traduções EN, ES, PT-BR para landing - PayPal configurado no servidor (sandbox) Versão: 1.54.0 --- CHANGELOG.md | 38 +++ VERSION | 2 +- frontend/src/App.jsx | 5 +- frontend/src/i18n/locales/en.json | 88 ++++++ frontend/src/i18n/locales/es.json | 88 ++++++ frontend/src/i18n/locales/pt-BR.json | 88 ++++++ frontend/src/pages/Landing.css | 349 ++++++++++++++++++++++++ frontend/src/pages/Landing.jsx | 385 +++++++++++++++++++++++++++ frontend/src/pages/Register.jsx | 277 +++++++++++++------ 9 files changed, 1233 insertions(+), 87 deletions(-) create mode 100644 frontend/src/pages/Landing.css create mode 100644 frontend/src/pages/Landing.jsx diff --git a/CHANGELOG.md b/CHANGELOG.md index e634d8b..5cc784d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,44 @@ O formato segue [Keep a Changelog](https://keepachangelog.com/pt-BR/). Este projeto adota [Versionamento Semântico](https://semver.org/pt-BR/). +## [1.54.0] - 2025-12-17 + +### Added +- 🏠 **Landing Page Pública WebMoney** - Nova página inicial institucional + - **Navbar** com links para seções e botões login/registro + - **Hero Section** com animação de preview do dashboard + - **Features Section** com 6 recursos principais: + - Múltiplas Contas, Categorias Inteligentes, Importação Bancária + - Relatórios Detalhados, Metas e Orçamentos, Multi-moeda + - **Pricing Section** integrada com API de planos + - Exibe planos Free, Pro Mensual, Pro Anual + - Destaque para plano mais popular + - Mostra período de trial e desconto anual + - **FAQ Section** com accordion interativo + - **CTA Section** com chamada para registro + - **Footer** completo com links úteis + +- 📝 **Registro com Seleção de Plano** + - Cards de planos no formulário de registro + - Suporte a parâmetro `?plan=slug` na URL + - Redirecionamento para PayPal após registro (planos pagos) + - Texto dinâmico do botão baseado no plano selecionado + +### Changed +- 🔄 **Rota inicial alterada** - "/" agora mostra Landing Page em vez de redirecionar para login +- 🌍 **Traduções** adicionadas para Landing em EN, ES e PT-BR + - Namespace `landing.*` com todas as seções + +### Technical Details +- Novo componente: `frontend/src/pages/Landing.jsx` +- Novo CSS: `frontend/src/pages/Landing.css` +- Atualizado: `frontend/src/App.jsx` (rota "/" e import Register) +- Atualizado: `frontend/src/pages/Register.jsx` (seleção de plano) +- Arquivos de tradução atualizados: `en.json`, `es.json`, `pt-BR.json` +- PayPal configurado no servidor (sandbox mode) + +--- + ## [1.53.0] - 2025-12-17 ### Fixed diff --git a/VERSION b/VERSION index 3f48301..b7921ae 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.53.0 +1.54.0 diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index caa36cd..b5cb7fc 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -6,6 +6,7 @@ import ProtectedRoute from './components/ProtectedRoute'; import Layout from './components/Layout'; import CookieConsent from './components/CookieConsent'; import Login from './pages/Login'; +import Landing from './pages/Landing'; import Dashboard from './pages/Dashboard'; import Accounts from './pages/Accounts'; import CostCenters from './pages/CostCenters'; @@ -27,6 +28,7 @@ import Pricing from './pages/Pricing'; import Billing from './pages/Billing'; import Users from './pages/Users'; import SiteSettings from './pages/SiteSettings'; +import Register from './pages/Register'; function App() { return ( @@ -35,6 +37,7 @@ function App() { } /> + } /> } /> - } /> + } /> diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json index c781775..ff3c7ef 100644 --- a/frontend/src/i18n/locales/en.json +++ b/frontend/src/i18n/locales/en.json @@ -2123,5 +2123,93 @@ "cancelNote2": "Your data will not be deleted", "cancelNote3": "You can reactivate your subscription at any time", "confirmCancel": "Yes, Cancel" + }, + "landing": { + "nav": { + "features": "Features", + "pricing": "Pricing", + "faq": "FAQ", + "login": "Login", + "register": "Start Now" + }, + "hero": { + "title": "Take Control of Your", + "titleHighlight": "Finances", + "subtitle": "Intelligent financial management for individuals and businesses. Track income, expenses, and achieve your financial goals.", + "cta": "Start Free", + "ctaSecondary": "View Plans", + "previewBalance": "Total Balance", + "previewIncome": "Income", + "previewExpense": "Expenses" + }, + "features": { + "title": "Everything You Need", + "subtitle": "Powerful tools to manage your money", + "item1": { + "title": "Multiple Accounts", + "description": "Manage bank accounts, cards, and cash in one place" + }, + "item2": { + "title": "Smart Categories", + "description": "Automatic categorization with keywords and subcategories" + }, + "item3": { + "title": "Bank Import", + "description": "Import statements from Excel, CSV, OFX, and PDF" + }, + "item4": { + "title": "Detailed Reports", + "description": "Charts and analysis to understand your spending" + }, + "item5": { + "title": "Goals & Budgets", + "description": "Define goals and control monthly spending" + }, + "item6": { + "title": "Multi-currency", + "description": "Manage finances in different currencies" + } + }, + "pricing": { + "title": "Simple Plans, Fair Prices", + "subtitle": "Choose the plan that fits your needs", + "monthly": "Monthly", + "annual": "Annual", + "popular": "Most Popular", + "perMonth": "/month", + "perYear": "/year", + "startFree": "Start Free", + "subscribe": "Subscribe Now", + "billedAnnually": "Billed annually" + }, + "faq": { + "title": "Frequently Asked Questions", + "q1": "Is my data secure?", + "a1": "Yes! We use bank-level encryption (SSL/TLS) and your data is stored on secure servers with regular backups. We never share your information with third parties.", + "q2": "Can I cancel anytime?", + "a2": "Yes, you can cancel your subscription at any time without fees. You'll keep access until the end of the period you already paid.", + "q3": "Which banks are compatible?", + "a3": "You can import statements from any bank that exports to Excel, CSV, OFX, or PDF. We have predefined mappings for major banks.", + "q4": "How does the free trial work?", + "a4": "You get full access to all features during the trial period. No credit card required to start. At the end, choose the plan that fits your needs." + }, + "cta": { + "title": "Ready to Transform Your Finances?", + "subtitle": "Join thousands of users who have already taken control of their money.", + "button": "Create Free Account" + }, + "footer": { + "description": "Smart Financial Management for individuals and businesses.", + "product": "Product", + "company": "Company", + "legal": "Legal", + "features": "Features", + "pricing": "Pricing", + "about": "About Us", + "contact": "Contact", + "privacy": "Privacy Policy", + "terms": "Terms of Use", + "rights": "All rights reserved." + } } } \ No newline at end of file diff --git a/frontend/src/i18n/locales/es.json b/frontend/src/i18n/locales/es.json index 698d763..6ab243b 100644 --- a/frontend/src/i18n/locales/es.json +++ b/frontend/src/i18n/locales/es.json @@ -2125,5 +2125,93 @@ "cancelNote2": "Tus datos no se eliminarán", "cancelNote3": "Puedes reactivar tu suscripción en cualquier momento", "confirmCancel": "Sí, Cancelar" + }, + "landing": { + "nav": { + "features": "Funcionalidades", + "pricing": "Precios", + "faq": "FAQ", + "login": "Iniciar Sesión", + "register": "Empezar Ahora" + }, + "hero": { + "title": "Toma el Control de tus", + "titleHighlight": "Finanzas", + "subtitle": "Gestión financiera inteligente para personas y empresas. Controla ingresos, gastos y alcanza tus metas financieras.", + "cta": "Comenzar Gratis", + "ctaSecondary": "Ver Planes", + "previewBalance": "Saldo Total", + "previewIncome": "Ingresos", + "previewExpense": "Gastos" + }, + "features": { + "title": "Todo lo que Necesitas", + "subtitle": "Herramientas potentes para gestionar tu dinero", + "item1": { + "title": "Múltiples Cuentas", + "description": "Gestiona cuentas bancarias, tarjetas y efectivo en un solo lugar" + }, + "item2": { + "title": "Categorías Inteligentes", + "description": "Categorización automática con palabras clave y subcategorías" + }, + "item3": { + "title": "Importación Bancaria", + "description": "Importa extractos de Excel, CSV, OFX y PDF" + }, + "item4": { + "title": "Reportes Detallados", + "description": "Gráficos y análisis para entender tus gastos" + }, + "item5": { + "title": "Metas y Presupuestos", + "description": "Define objetivos y controla gastos mensuales" + }, + "item6": { + "title": "Multi-moneda", + "description": "Gestiona finanzas en diferentes monedas" + } + }, + "pricing": { + "title": "Planes Simples, Precios Justos", + "subtitle": "Elige el plan que se adapte a tus necesidades", + "monthly": "Mensual", + "annual": "Anual", + "popular": "Más Popular", + "perMonth": "/mes", + "perYear": "/año", + "startFree": "Comenzar Gratis", + "subscribe": "Suscribirse Ahora", + "billedAnnually": "Facturado anualmente" + }, + "faq": { + "title": "Preguntas Frecuentes", + "q1": "¿Mis datos están seguros?", + "a1": "¡Sí! Utilizamos cifrado de nivel bancario (SSL/TLS) y tus datos se almacenan en servidores seguros con copias de seguridad regulares. Nunca compartimos tu información con terceros.", + "q2": "¿Puedo cancelar cuando quiera?", + "a2": "Sí, puedes cancelar tu suscripción en cualquier momento sin cargos. Mantendrás el acceso hasta el final del período que ya pagaste.", + "q3": "¿Qué bancos son compatibles?", + "a3": "Puedes importar extractos de cualquier banco que exporte a Excel, CSV, OFX o PDF. Tenemos mapeos predefinidos para los principales bancos.", + "q4": "¿Cómo funciona la prueba gratuita?", + "a4": "Tienes acceso completo a todas las funcionalidades durante el período de prueba. No se requiere tarjeta de crédito para empezar. Al final, elige el plan que se adapte a tus necesidades." + }, + "cta": { + "title": "¿Listo para Transformar tus Finanzas?", + "subtitle": "Únete a miles de usuarios que ya tomaron el control de su dinero.", + "button": "Crear Cuenta Gratis" + }, + "footer": { + "description": "Gestión Financiera Inteligente para personas y empresas.", + "product": "Producto", + "company": "Empresa", + "legal": "Legal", + "features": "Funcionalidades", + "pricing": "Precios", + "about": "Sobre Nosotros", + "contact": "Contacto", + "privacy": "Política de Privacidad", + "terms": "Términos de Uso", + "rights": "Todos los derechos reservados." + } } } \ No newline at end of file diff --git a/frontend/src/i18n/locales/pt-BR.json b/frontend/src/i18n/locales/pt-BR.json index 915ae2f..106d55c 100644 --- a/frontend/src/i18n/locales/pt-BR.json +++ b/frontend/src/i18n/locales/pt-BR.json @@ -2143,5 +2143,93 @@ "cancelNote2": "Seus dados não serão excluídos", "cancelNote3": "Você pode reativar sua assinatura a qualquer momento", "confirmCancel": "Sim, Cancelar" + }, + "landing": { + "nav": { + "features": "Recursos", + "pricing": "Preços", + "faq": "FAQ", + "login": "Entrar", + "register": "Começar Agora" + }, + "hero": { + "title": "Assuma o Controle das suas", + "titleHighlight": "Finanças", + "subtitle": "Gestão financeira inteligente para pessoas e empresas. Acompanhe receitas, despesas e alcance seus objetivos financeiros.", + "cta": "Começar Grátis", + "ctaSecondary": "Ver Planos", + "previewBalance": "Saldo Total", + "previewIncome": "Receitas", + "previewExpense": "Despesas" + }, + "features": { + "title": "Tudo que Você Precisa", + "subtitle": "Ferramentas poderosas para gerenciar seu dinheiro", + "item1": { + "title": "Múltiplas Contas", + "description": "Gerencie contas bancárias, cartões e dinheiro em um só lugar" + }, + "item2": { + "title": "Categorias Inteligentes", + "description": "Categorização automática com palavras-chave e subcategorias" + }, + "item3": { + "title": "Importação Bancária", + "description": "Importe extratos de Excel, CSV, OFX e PDF" + }, + "item4": { + "title": "Relatórios Detalhados", + "description": "Gráficos e análises para entender seus gastos" + }, + "item5": { + "title": "Metas e Orçamentos", + "description": "Defina objetivos e controle gastos mensais" + }, + "item6": { + "title": "Multi-moeda", + "description": "Gerencie finanças em diferentes moedas" + } + }, + "pricing": { + "title": "Planos Simples, Preços Justos", + "subtitle": "Escolha o plano que atende às suas necessidades", + "monthly": "Mensal", + "annual": "Anual", + "popular": "Mais Popular", + "perMonth": "/mês", + "perYear": "/ano", + "startFree": "Começar Grátis", + "subscribe": "Assinar Agora", + "billedAnnually": "Cobrado anualmente" + }, + "faq": { + "title": "Perguntas Frequentes", + "q1": "Meus dados estão seguros?", + "a1": "Sim! Usamos criptografia de nível bancário (SSL/TLS) e seus dados são armazenados em servidores seguros com backups regulares. Nunca compartilhamos suas informações com terceiros.", + "q2": "Posso cancelar quando quiser?", + "a2": "Sim, você pode cancelar sua assinatura a qualquer momento sem taxas. Você manterá o acesso até o final do período que já pagou.", + "q3": "Quais bancos são compatíveis?", + "a3": "Você pode importar extratos de qualquer banco que exporte para Excel, CSV, OFX ou PDF. Temos mapeamentos predefinidos para os principais bancos.", + "q4": "Como funciona o período de teste?", + "a4": "Você tem acesso completo a todos os recursos durante o período de teste. Não é necessário cartão de crédito para começar. No final, escolha o plano que atende às suas necessidades." + }, + "cta": { + "title": "Pronto para Transformar suas Finanças?", + "subtitle": "Junte-se a milhares de usuários que já assumiram o controle do seu dinheiro.", + "button": "Criar Conta Grátis" + }, + "footer": { + "description": "Gestão Financeira Inteligente para pessoas e empresas.", + "product": "Produto", + "company": "Empresa", + "legal": "Legal", + "features": "Recursos", + "pricing": "Preços", + "about": "Sobre Nós", + "contact": "Contato", + "privacy": "Política de Privacidade", + "terms": "Termos de Uso", + "rights": "Todos os direitos reservados." + } } } \ No newline at end of file diff --git a/frontend/src/pages/Landing.css b/frontend/src/pages/Landing.css new file mode 100644 index 0000000..965ab8e --- /dev/null +++ b/frontend/src/pages/Landing.css @@ -0,0 +1,349 @@ +/* Landing Page Styles */ + +/* Variables */ +:root { + --landing-primary: #3b82f6; + --landing-primary-dark: #1e40af; + --landing-secondary: #10b981; + --landing-dark: #0f172a; + --landing-dark-lighter: #1e293b; + --landing-text: #f1f5f9; + --landing-text-muted: #94a3b8; + --landing-border: #334155; +} + +.landing-page { + background: var(--landing-dark); + color: var(--landing-text); + min-height: 100vh; +} + +/* Navbar */ +.landing-navbar { + background: rgba(15, 23, 42, 0.95); + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--landing-border); + padding: 1rem 0; + transition: all 0.3s ease; +} + +.landing-navbar.scrolled { + padding: 0.5rem 0; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); +} + +.landing-navbar .nav-link { + color: var(--landing-text-muted) !important; + font-weight: 500; + padding: 0.5rem 1rem !important; + transition: color 0.3s ease; + background: none; + border: none; +} + +.landing-navbar .nav-link:hover { + color: var(--landing-text) !important; +} + +/* Hero Section */ +.hero-section { + position: relative; + overflow: hidden; +} + +.hero-bg { + position: absolute; + inset: 0; + background: radial-gradient(ellipse at 20% 20%, rgba(59, 130, 246, 0.15), transparent 50%), + radial-gradient(ellipse at 80% 80%, rgba(16, 185, 129, 0.1), transparent 50%); +} + +.hero-section .container { + position: relative; + z-index: 1; +} + +/* Dashboard Preview */ +.hero-image { + perspective: 1000px; +} + +.dashboard-preview { + background: var(--landing-dark-lighter); + border-radius: 16px; + border: 1px solid var(--landing-border); + overflow: hidden; + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); + transform: rotateY(-5deg) rotateX(5deg); + transition: transform 0.5s ease; +} + +.dashboard-preview:hover { + transform: rotateY(0) rotateX(0); +} + +.preview-header { + background: var(--landing-dark); + padding: 12px 16px; + border-bottom: 1px solid var(--landing-border); +} + +.preview-dots { + display: flex; + gap: 8px; +} + +.preview-dots .dot { + width: 12px; + height: 12px; + border-radius: 50%; +} + +.preview-dots .dot.red { background: #ef4444; } +.preview-dots .dot.yellow { background: #f59e0b; } +.preview-dots .dot.green { background: #22c55e; } + +.preview-content { + padding: 24px; + display: flex; + flex-direction: column; + gap: 16px; +} + +.preview-card { + background: var(--landing-dark); + border-radius: 12px; + padding: 20px; + display: flex; + align-items: center; + gap: 16px; + font-size: 1.25rem; + font-weight: 600; +} + +.preview-card i { + font-size: 2rem; +} + +.preview-card.balance i { color: var(--landing-primary); } +.preview-card.income i { color: #22c55e; } +.preview-card.expense i { color: #ef4444; } + +.preview-card.income span { color: #22c55e; } +.preview-card.expense span { color: #ef4444; } + +/* Features Section */ +.features-section { + background: var(--landing-dark-lighter); +} + +.feature-card { + background: var(--landing-dark); + border-radius: 16px; + padding: 32px; + border: 1px solid var(--landing-border); + transition: transform 0.3s ease, border-color 0.3s ease; +} + +.feature-card:hover { + transform: translateY(-8px); + border-color: var(--landing-primary); +} + +.feature-icon { + width: 64px; + height: 64px; + background: linear-gradient(135deg, var(--landing-primary), var(--landing-secondary)); + border-radius: 16px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 24px; +} + +.feature-icon i { + font-size: 28px; + color: white; +} + +.feature-card h4 { + margin-bottom: 12px; + color: var(--landing-text); +} + +/* Pricing Section */ +.pricing-section { + background: var(--landing-dark); +} + +.pricing-card { + background: var(--landing-dark-lighter); + border-radius: 16px; + padding: 32px; + border: 1px solid var(--landing-border); + transition: transform 0.3s ease, border-color 0.3s ease; + display: flex; + flex-direction: column; +} + +.pricing-card:hover { + transform: translateY(-8px); +} + +.pricing-card.featured { + border-color: var(--landing-primary); + box-shadow: 0 0 40px rgba(59, 130, 246, 0.2); + position: relative; +} + +.featured-badge { + position: absolute; + top: -12px; + left: 50%; + transform: translateX(-50%); + background: linear-gradient(135deg, var(--landing-primary), var(--landing-primary-dark)); + color: white; + padding: 6px 20px; + border-radius: 20px; + font-size: 0.875rem; + font-weight: 600; +} + +.pricing-header { + text-align: center; + margin-bottom: 24px; + padding-bottom: 24px; + border-bottom: 1px solid var(--landing-border); +} + +.pricing-header h3 { + font-size: 1.5rem; + margin-bottom: 16px; +} + +.price { + display: flex; + align-items: baseline; + justify-content: center; + gap: 4px; +} + +.price .currency { + font-size: 1.5rem; + font-weight: 600; + color: var(--landing-text-muted); +} + +.price .amount { + font-size: 3rem; + font-weight: 700; + color: var(--landing-text); +} + +.price .period { + font-size: 1rem; + color: var(--landing-text-muted); +} + +.billing-note { + font-size: 0.875rem; + color: var(--landing-text-muted); + margin-top: 8px; +} + +.pricing-features { + list-style: none; + padding: 0; + margin: 0 0 24px 0; + flex-grow: 1; +} + +.pricing-features li { + padding: 12px 0; + border-bottom: 1px solid var(--landing-border); + font-size: 0.95rem; +} + +.pricing-features li:last-child { + border-bottom: none; +} + +.pricing-footer { + margin-top: auto; +} + +/* FAQ Section */ +.faq-section { + background: var(--landing-dark-lighter); +} + +.faq-section .accordion-item { + background: var(--landing-dark); + border: 1px solid var(--landing-border); + margin-bottom: 12px; + border-radius: 12px !important; + overflow: hidden; +} + +.faq-section .accordion-button { + background: var(--landing-dark); + color: var(--landing-text); + font-weight: 500; + padding: 20px 24px; +} + +.faq-section .accordion-button:not(.collapsed) { + background: var(--landing-dark); + color: var(--landing-primary); +} + +.faq-section .accordion-button::after { + filter: invert(1); +} + +.faq-section .accordion-button:focus { + box-shadow: none; + border-color: var(--landing-primary); +} + +.faq-section .accordion-body { + background: var(--landing-dark); + color: var(--landing-text-muted); + padding: 0 24px 20px 24px; +} + +/* CTA Section */ +.cta-section { + background: linear-gradient(135deg, var(--landing-primary), var(--landing-primary-dark)); +} + +/* Footer */ +.landing-footer { + background: var(--landing-dark); + border-top: 1px solid var(--landing-border); +} + +.landing-footer a { + text-decoration: none; + transition: color 0.3s ease; +} + +.landing-footer a:hover { + color: var(--landing-primary) !important; +} + +/* Responsive */ +@media (max-width: 768px) { + .hero-section .row { + min-height: auto; + padding-top: 100px; + } + + .price .amount { + font-size: 2.5rem; + } + + .feature-card { + padding: 24px; + } +} diff --git a/frontend/src/pages/Landing.jsx b/frontend/src/pages/Landing.jsx new file mode 100644 index 0000000..b116317 --- /dev/null +++ b/frontend/src/pages/Landing.jsx @@ -0,0 +1,385 @@ +import React, { useState, useEffect } from 'react'; +import { Link, useNavigate } from 'react-router-dom'; +import { useTranslation } from 'react-i18next'; +import { useAuth } from '../context/AuthContext'; +import api from '../services/api'; +import logo from '../assets/logo-white.png'; +import './Landing.css'; + +export default function Landing() { + const { t, i18n } = useTranslation(); + const navigate = useNavigate(); + const { user, isAuthenticated } = useAuth(); + const [plans, setPlans] = useState([]); + const [loading, setLoading] = useState(true); + + // Se já está autenticado, vai para dashboard + useEffect(() => { + if (isAuthenticated && user) { + navigate('/dashboard'); + } + }, [isAuthenticated, user, navigate]); + + useEffect(() => { + loadPlans(); + }, []); + + const loadPlans = async () => { + try { + const response = await api.get('/plans'); + if (response.data.success) { + setPlans(response.data.data.plans); + } + } catch (error) { + console.error('Error loading plans:', error); + } finally { + setLoading(false); + } + }; + + const scrollToSection = (id) => { + document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' }); + }; + + const features = [ + { + icon: 'bi-wallet2', + title: t('landing.features.accounts.title'), + description: t('landing.features.accounts.description'), + }, + { + icon: 'bi-graph-up-arrow', + title: t('landing.features.analytics.title'), + description: t('landing.features.analytics.description'), + }, + { + icon: 'bi-tags', + title: t('landing.features.categories.title'), + description: t('landing.features.categories.description'), + }, + { + icon: 'bi-cloud-upload', + title: t('landing.features.import.title'), + description: t('landing.features.import.description'), + }, + { + icon: 'bi-arrow-repeat', + title: t('landing.features.recurring.title'), + description: t('landing.features.recurring.description'), + }, + { + icon: 'bi-shield-check', + title: t('landing.features.security.title'), + description: t('landing.features.security.description'), + }, + ]; + + const faqs = [ + { + question: t('landing.faq.q1'), + answer: t('landing.faq.a1'), + }, + { + question: t('landing.faq.q2'), + answer: t('landing.faq.a2'), + }, + { + question: t('landing.faq.q3'), + answer: t('landing.faq.a3'), + }, + { + question: t('landing.faq.q4'), + answer: t('landing.faq.a4'), + }, + ]; + + return ( +
+ {/* Navigation */} + + + {/* Hero Section */} +
+
+
+
+
+

+ {t('landing.hero.title')} +

+

+ {t('landing.hero.subtitle')} +

+
+ + + {t('landing.hero.cta')} + + +
+ + {/* Trust badges */} +
+
+ + {t('landing.hero.secure')} +
+
+ + PayPal +
+
+
+ +
+
+
+
+
+ + + +
+
+
+
+ + €12,450.00 +
+
+ + +€3,200 +
+
+ + -€1,850 +
+
+
+
+
+
+
+
+ + {/* Features Section */} +
+
+
+

{t('landing.features.title')}

+

{t('landing.features.subtitle')}

+
+ +
+ {features.map((feature, index) => ( +
+
+
+ +
+

{feature.title}

+

{feature.description}

+
+
+ ))} +
+
+
+ + {/* Pricing Section */} +
+
+
+

{t('landing.pricing.title')}

+

{t('landing.pricing.subtitle')}

+
+ + {loading ? ( +
+
+ Loading... +
+
+ ) : ( +
+ {plans.map((plan) => ( +
+
+ {plan.is_featured && ( +
+ + {t('landing.pricing.popular')} +
+ )} + +
+

{plan.name}

+
+ {plan.is_free ? ( + {t('landing.pricing.free')} + ) : ( + <> + € + {plan.monthly_price?.toFixed(2) || plan.price} + /{t('landing.pricing.month')} + + )} +
+ {plan.billing_period === 'annual' && !plan.is_free && ( +

+ {t('landing.pricing.billedAnnually', { price: plan.price })} +

+ )} +
+ +
    + {(plan.features || []).map((feature, idx) => ( +
  • + + {feature} +
    • + ))} +
+ +
+ + {plan.is_free ? t('landing.pricing.startFree') : t('landing.pricing.subscribe')} + +
+
+
+ ))} +
+ )} +
+
+ + {/* FAQ Section */} +
+
+
+

{t('landing.faq.title')}

+
+ +
+
+
+ {faqs.map((faq, index) => ( +
+

+ +

+
+
+ {faq.answer} +
+
+
+ ))} +
+
+
+
+
+ + {/* CTA Section */} +
+
+

+ {t('landing.cta.title')} +

+

+ {t('landing.cta.subtitle')} +

+ + + {t('landing.cta.button')} + +
+
+ + {/* Footer */} + +
+ ); +} diff --git a/frontend/src/pages/Register.jsx b/frontend/src/pages/Register.jsx index 244d4f8..8cba128 100644 --- a/frontend/src/pages/Register.jsx +++ b/frontend/src/pages/Register.jsx @@ -1,12 +1,18 @@ -import React, { useState } from 'react'; -import { Link, useNavigate } from 'react-router-dom'; +import React, { useState, useEffect } from 'react'; +import { Link, useNavigate, useSearchParams } from 'react-router-dom'; +import { useTranslation } from 'react-i18next'; import { useAuth } from '../context/AuthContext'; import Footer from '../components/Footer'; +import api from '../services/api'; import logo from '../assets/logo-white.png'; const Register = () => { + const { t } = useTranslation(); const navigate = useNavigate(); + const [searchParams] = useSearchParams(); const { register } = useAuth(); + const [plans, setPlans] = useState([]); + const [selectedPlan, setSelectedPlan] = useState(null); const [formData, setFormData] = useState({ name: '', email: '', @@ -15,6 +21,31 @@ const Register = () => { }); const [errors, setErrors] = useState({}); const [loading, setLoading] = useState(false); + const [loadingPlans, setLoadingPlans] = useState(true); + + // Carregar planos + useEffect(() => { + const fetchPlans = async () => { + try { + const response = await api.get('/plans'); + setPlans(response.data.data || response.data); + + // Verificar se há plano na URL + const planSlug = searchParams.get('plan'); + if (planSlug && response.data.data) { + const plan = response.data.data.find(p => p.slug === planSlug); + if (plan) { + setSelectedPlan(plan); + } + } + } catch (error) { + console.error('Error loading plans:', error); + } finally { + setLoadingPlans(false); + } + }; + fetchPlans(); + }, [searchParams]); const handleChange = (e) => { setFormData({ @@ -33,8 +64,26 @@ const Register = () => { setErrors({}); try { - const response = await register(formData); + const response = await register({ + ...formData, + plan_id: selectedPlan?.id, + }); if (response.success) { + // Se for plano pago, redirecionar para pagamento + if (selectedPlan && selectedPlan.price > 0) { + try { + const subscriptionResponse = await api.post('/subscription/subscribe', { + plan_id: selectedPlan.id, + }); + if (subscriptionResponse.data.approve_url) { + window.location.href = subscriptionResponse.data.approve_url; + return; + } + } catch (subError) { + console.error('Subscription error:', subError); + // Continuar para o dashboard mesmo sem subscrição + } + } navigate('/dashboard'); } } catch (error) { @@ -53,15 +102,57 @@ const Register = () => { return (
-
+
- WebMoney + + WebMoney +

WebMoney

-

Crie sua conta

+

{t('auth.createAccount', 'Crea tu cuenta')}

+ {/* Plan Selection */} + {!loadingPlans && plans.length > 0 && ( +
+ +
+ {plans.map((plan) => ( +
+
setSelectedPlan(plan)} + > +
+
{plan.name}
+

+ {plan.price > 0 ? `€${plan.price}` : t('pricing.free', 'Gratis')} + {plan.price > 0 && /{plan.billing_period === 'yearly' ? t('pricing.year', 'año') : t('pricing.month', 'mes')}} +

+ {plan.trial_days > 0 && ( + + + {plan.trial_days} {t('common.days', 'días')} {t('pricing.trial', 'de prueba')} + + )} + {selectedPlan?.id === plan.id && ( +
+ +
+ )} +
+
+
+ ))} +
+
+ )} + {errors.general && (
@@ -70,106 +161,122 @@ const Register = () => { )}
-
- - - {errors.name && ( -
{errors.name}
- )} +
+
+ + + {errors.name && ( +
{errors.name}
+ )} +
+ +
+ + + {errors.email && ( +
{errors.email}
+ )} +
-
- - - {errors.email && ( -
{errors.email}
- )} -
+
+
+ + + {errors.password && ( +
{errors.password}
+ )} +
-
- - - {errors.password && ( -
{errors.password}
- )} -
- -
- - - {errors.password_confirmation && ( -
{errors.password_confirmation}
- )} +
+ + + {errors.password_confirmation && ( +
{errors.password_confirmation}
+ )} +
+ + {selectedPlan && selectedPlan.price > 0 && ( +

+ + {t('pricing.paypalSecure', 'Pago seguro con PayPal')} +

+ )}

- ¿Ya tienes cuenta?{' '} + {t('register.alreadyHaveAccount', '¿Ya tienes cuenta?')}{' '} - Inicia sesión aquí + {t('register.loginHere', 'Inicia sesión aquí')}