Feature/readme

[ruchibahl18]

No description provided.

[onenoly1010]

reviewed and ready for merge

[onenoly1010]

reviewed

[antoniobentosandango38-prog]

// components/OnboardingIdentity.js
import { useState } from 'react';
import { motion } from 'framer-motion';

export default function OnboardingIdentity({ onNext }) {
const [docType, setDocType] = useState('BI'); // BI ou Passaporte
const [formData, setFormData] = useState({
fullName: '',
docNumber: '',
});

const handleInputChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};

const isFormValid = formData.fullName.length > 5 && formData.docNumber.length > 5;

return (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="max-w-md mx-auto bg-slate-900 p-8 rounded-3xl border border-slate-800 shadow-2xl"
>

🛡️

Identificação

Segurança em primeiro lugar. Escolha o documento para validar sua conta.

 {/* Seletor de Tipo de Documento */}
<div className="flex p-1 bg-slate-800 rounded-xl mb-6">
<button
onClick={() => setDocType('BI')}
className={`flex-1 py-2 text-sm font-medium rounded-lg transition-all ${docType === 'BI' ? 'bg-emerald-500 text-black' : 'text-gray-400'}`}
>
🇦🇴 BI Angolano
</button>
<button
onClick={() => setDocType('Passport')}
className={`flex-1 py-2 text-sm font-medium rounded-lg transition-all ${docType === 'Passport' ? 'bg-emerald-500 text-black' : 'text-gray-400'}`}
>
🌐 Passaporte
</button>
</div>
<div className="space-y-4">
<div>
<label className="text-xs font-semibold text-gray-500 uppercase ml-1">Nome Completo</label>
<input
type="text"
name="fullName"
placeholder="Ex: Manuel dos Santos"
onChange={handleInputChange}
className="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 mt-1 text-white focus:border-emerald-500 outline-none transition-all"
/>
</div>
<div>
<label className="text-xs font-semibold text-gray-500 uppercase ml-1">
Número do {docType === 'BI' ? 'Bilhete' : 'Passaporte'}
</label>
<input
type="text"
name="docNumber"
placeholder={docType === 'BI' ? '000000000LA000' : 'N0000000'}
onChange={handleInputChange}
className="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 mt-1 text-white focus:border-emerald-500 outline-none transition-all font-mono"
/>
</div>
</div>
<button
disabled={!isFormValid}
onClick={() => onNext(formData)}
className={`w-full mt-8 py-4 rounded-xl font-bold transition-all ${
isFormValid ? 'bg-gradient-to-r from-emerald-500 to-teal-600 text-white shadow-lg shadow-emerald-500/20 hover:scale-[1.02]' : 'bg-slate-800 text-gray-500 cursor-not-allowed'
}`}
>
Continuar para o Dashboard
</button>
<p className="text-[10px] text-center text-gray-600 mt-6 leading-relaxed">
Ao continuar, você concorda com os termos de custódia e proteção de dados do Sandango Cripto. Sua identidade será validada por um sistema encriptado.
</p>
</motion.div>

);
}