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>

);
}