From da429db8e2525ec7e38c0ff8f14a734a523927ed Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 11 Mar 2026 19:55:32 +0000 Subject: [PATCH] Add src/app/signup/page.tsx --- src/app/signup/page.tsx | 428 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 428 insertions(+) create mode 100644 src/app/signup/page.tsx diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx new file mode 100644 index 0000000..2267a83 --- /dev/null +++ b/src/app/signup/page.tsx @@ -0,0 +1,428 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; +import ContactCTA from '@/components/sections/contact/ContactCTA'; +import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'; +import { Mail, Lock, User, AlertCircle, Check, ArrowRight } from 'lucide-react'; +import { useState } from 'react'; + +interface FormErrors { + [key: string]: string; +} + +interface SignupFormData { + name: string; + email: string; + password: string; + confirmPassword: string; + agreedToTerms: boolean; +} + +export default function SignupPage() { + const [formData, setFormData] = useState({ + name: '', + email: '', + password: '', + confirmPassword: '', + agreedToTerms: false + }); + const [errors, setErrors] = useState({}); + const [isSubmitting, setIsSubmitting] = useState(false); + const [passwordStrength, setPasswordStrength] = useState(0); + + const calculatePasswordStrength = (password: string) => { + let strength = 0; + if (password.length >= 8) strength++; + if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++; + if (/\d/.test(password)) strength++; + if (/[^a-zA-Z\d]/.test(password)) strength++; + setPasswordStrength(strength); + }; + + const validateForm = () => { + const newErrors: FormErrors = {}; + + if (!formData.name.trim()) { + newErrors.name = 'Nome é obrigatório'; + } else if (formData.name.length < 2) { + newErrors.name = 'Nome deve ter pelo menos 2 caracteres'; + } + + if (!formData.email) { + newErrors.email = 'Email é obrigatório'; + } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) { + newErrors.email = 'Email inválido'; + } + + if (!formData.password) { + newErrors.password = 'Senha é obrigatória'; + } else if (formData.password.length < 8) { + newErrors.password = 'Senha deve ter pelo menos 8 caracteres'; + } + + if (formData.password !== formData.confirmPassword) { + newErrors.confirmPassword = 'As senhas não correspondem'; + } + + if (!formData.agreedToTerms) { + newErrors.agreedToTerms = 'Você deve aceitar os termos e condições'; + } + + setErrors(newErrors); + return Object.keys(newErrors).length === 0; + }; + + const handleChange = (e: React.ChangeEvent) => { + const { name, value, type, checked } = e.target; + const newValue = type === 'checkbox' ? checked : value; + + setFormData(prev => ({ + ...prev, + [name]: newValue + })); + + if (errors[name]) { + setErrors(prev => ({ + ...prev, + [name]: '' + })); + } + + if (name === 'password') { + calculatePasswordStrength(value); + } + }; + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + + if (!validateForm()) { + return; + } + + setIsSubmitting(true); + try { + await new Promise(resolve => setTimeout(resolve, 1500)); + console.log('Signup attempt:', formData); + alert('Conta criada com sucesso! Faça login para continuar.'); + setFormData({ + name: '', + email: '', + password: '', + confirmPassword: '', + agreedToTerms: false + }); + setPasswordStrength(0); + } catch (error) { + setErrors({ submit: 'Erro ao criar conta. Tente novamente.' }); + } finally { + setIsSubmitting(false); + } + }; + + const getPasswordStrengthColor = () => { + if (passwordStrength === 0) return 'bg-gray-300'; + if (passwordStrength === 1) return 'bg-red-500'; + if (passwordStrength === 2) return 'bg-yellow-500'; + if (passwordStrength === 3) return 'bg-blue-500'; + return 'bg-green-500'; + }; + + const getPasswordStrengthLabel = () => { + if (passwordStrength === 0) return ''; + if (passwordStrength === 1) return 'Fraca'; + if (passwordStrength === 2) return 'Média'; + if (passwordStrength === 3) return 'Forte'; + return 'Muito Forte'; + }; + + return ( + + + +
+
+
+

Comece sua jornada

+

Crie sua conta FitFlow Pro e transforme seu corpo

+
+ +
+
+ {/* Name Field */} +
+ +
+ + +
+ {errors.name && ( +
+ + {errors.name} +
+ )} +
+ + {/* Email Field */} +
+ +
+ + +
+ {errors.email && ( +
+ + {errors.email} +
+ )} +
+ + {/* Password Field */} +
+ +
+ + +
+ {formData.password && ( +
+
+
+
+

+ Força: {getPasswordStrengthLabel()} +

+
+ )} + {errors.password && ( +
+ + {errors.password} +
+ )} +
+ + {/* Confirm Password Field */} +
+ +
+ + +
+ {formData.confirmPassword && formData.password === formData.confirmPassword && !errors.confirmPassword && ( +
+ + Senhas correspondem +
+ )} + {errors.confirmPassword && ( +
+ + {errors.confirmPassword} +
+ )} +
+ + {/* Terms Checkbox */} +
+
+ + +
+ {errors.agreedToTerms && ( +
+ + {errors.agreedToTerms} +
+ )} +
+ + {/* Submit Errors */} + {errors.submit && ( +
+ + {errors.submit} +
+ )} + + {/* Submit Button */} + +
+ + {/* Divider */} +
+
+
+
+
+ ou continue com +
+
+ + {/* Social Signup Buttons */} +
+ + +
+
+ + {/* Login Link */} +

+ Já tem conta?{' '} + + Fazer login + +

+
+
+ + + + ); +} \ No newline at end of file