250 lines
8.5 KiB
TypeScript
250 lines
8.5 KiB
TypeScript
import React, { useState } from "react";
|
|
import { Button } from "../components/Button";
|
|
import { X } from "lucide-react";
|
|
import { verifyAccessCode } from "../services/apiService";
|
|
|
|
interface HomeProps {
|
|
onEnter: () => void;
|
|
}
|
|
|
|
export const Home: React.FC<HomeProps> = ({ onEnter }) => {
|
|
const [showAccessCodeModal, setShowAccessCodeModal] = useState(false);
|
|
const [accessCode, setAccessCode] = useState("");
|
|
const [showProfessionalPrompt, setShowProfessionalPrompt] = useState(false);
|
|
const [codeError, setCodeError] = useState("");
|
|
|
|
const handleRegisterClick = () => {
|
|
setShowProfessionalPrompt(true);
|
|
setAccessCode("");
|
|
setCodeError("");
|
|
};
|
|
|
|
const handleVerifyCode = async () => {
|
|
if (accessCode.trim() === "") {
|
|
setCodeError("Por favor, digite o código de acesso");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const res = await verifyAccessCode(accessCode.toUpperCase());
|
|
if (res.data && res.data.valid) {
|
|
setShowAccessCodeModal(false);
|
|
window.location.href = "/cadastro";
|
|
} else {
|
|
setCodeError(res.data?.error || "Código de acesso inválido ou expirado");
|
|
}
|
|
} catch (e) {
|
|
setCodeError("Erro ao verificar código");
|
|
}
|
|
};
|
|
|
|
const handleProfessionalChoice = (isProfessional: boolean) => {
|
|
setShowProfessionalPrompt(false);
|
|
if (isProfessional) {
|
|
window.location.href = "/cadastro-profissional";
|
|
} else {
|
|
setShowAccessCodeModal(true);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="min-h-screen flex items-center justify-center relative overflow-hidden"
|
|
style={{ backgroundColor: "#B9CF33" }}
|
|
>
|
|
<style>{`
|
|
@keyframes fadeInScale {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translateY(0px);
|
|
}
|
|
50% {
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
.animate-fade-in-scale {
|
|
animation: fadeInScale 0.6s ease-out forwards;
|
|
}
|
|
.animate-float {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
`}</style>
|
|
|
|
{/* Círculos decorativos animados */}
|
|
<div
|
|
className="absolute top-5 sm:top-10 left-5 sm:left-10 w-32 sm:w-48 md:w-64 h-32 sm:h-48 md:h-64 bg-white/20 rounded-full blur-2xl sm:blur-3xl animate-float"
|
|
style={{ animationDelay: "0s" }}
|
|
></div>
|
|
<div
|
|
className="absolute bottom-10 sm:bottom-20 right-10 sm:right-20 w-48 sm:w-64 md:w-80 h-48 sm:h-64 md:h-80 bg-white/20 rounded-full blur-2xl sm:blur-3xl animate-float"
|
|
style={{ animationDelay: "2s" }}
|
|
></div>
|
|
<div
|
|
className="absolute top-1/3 right-5 sm:right-10 w-32 sm:w-40 md:w-48 h-32 sm:h-40 md:h-48 bg-white/20 rounded-full blur-xl sm:blur-2xl animate-float"
|
|
style={{ animationDelay: "4s" }}
|
|
></div>
|
|
|
|
<div className="bg-white rounded-xl sm:rounded-2xl shadow-2xl p-6 sm:p-8 md:p-12 max-w-[90%] sm:max-w-md w-full mx-3 sm:mx-4 animate-fade-in-scale relative z-10">
|
|
{/* Logo */}
|
|
<div className="flex justify-center mb-4 sm:mb-6">
|
|
<img
|
|
src="/logo_preta.png"
|
|
alt="Photum Formaturas"
|
|
className="h-16 sm:h-20 md:h-24 lg:h-32 w-auto object-contain"
|
|
/>
|
|
</div>
|
|
|
|
{/* Botões */}
|
|
<div className="space-y-3 sm:space-y-4">
|
|
<Button onClick={onEnter} className="w-full" size="lg">
|
|
Entrar
|
|
</Button>
|
|
|
|
<Button
|
|
onClick={handleRegisterClick}
|
|
variant="outline"
|
|
className="w-full"
|
|
size="lg"
|
|
>
|
|
Cadastre-se agora
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Modal de Código de Acesso */}
|
|
{showAccessCodeModal && (
|
|
<div
|
|
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4"
|
|
onClick={() => setShowAccessCodeModal(false)}
|
|
>
|
|
<div
|
|
className="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 sm:p-8 animate-fade-in-scale"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h2 className="text-2xl font-bold text-gray-900">
|
|
Código de Acesso
|
|
</h2>
|
|
<button
|
|
onClick={() => setShowAccessCodeModal(false)}
|
|
className="text-gray-400 hover:text-gray-600 transition-colors"
|
|
>
|
|
<X size={24} />
|
|
</button>
|
|
</div>
|
|
|
|
<p className="text-gray-600 mb-6">
|
|
Digite o código de acesso fornecido pela empresa para continuar
|
|
com o cadastro.
|
|
</p>
|
|
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Código de Acesso *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={accessCode}
|
|
onChange={(e) => {
|
|
setAccessCode(e.target.value.toUpperCase());
|
|
setCodeError("");
|
|
}}
|
|
onKeyPress={(e) => e.key === "Enter" && handleVerifyCode()}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#B9CF33] focus:border-transparent uppercase"
|
|
placeholder="Digite o código"
|
|
autoFocus
|
|
/>
|
|
{codeError && (
|
|
<p className="text-red-500 text-sm mt-2">{codeError}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
|
|
<p className="text-sm text-yellow-800">
|
|
<strong>Atenção:</strong> O código de acesso é fornecido pela
|
|
empresa e tem validade temporária.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex gap-3">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setShowAccessCodeModal(false)}
|
|
className="flex-1"
|
|
>
|
|
Cancelar
|
|
</Button>
|
|
<Button onClick={handleVerifyCode} className="flex-1">
|
|
Verificar
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Modal de Escolha de Tipo de Cadastro */}
|
|
{showProfessionalPrompt && (
|
|
<div
|
|
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4"
|
|
onClick={() => setShowProfessionalPrompt(false)}
|
|
>
|
|
<div
|
|
className="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 sm:p-8 animate-fade-in-scale"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h2 className="text-2xl font-bold text-gray-900">
|
|
Tipo de Cadastro
|
|
</h2>
|
|
<button
|
|
onClick={() => setShowProfessionalPrompt(false)}
|
|
className="text-gray-400 hover:text-gray-600 transition-colors"
|
|
>
|
|
<X size={24} />
|
|
</button>
|
|
</div>
|
|
|
|
<p className="text-gray-600 mb-6">
|
|
Você é um profissional (fotógrafo/cinegrafista) ou um cliente?
|
|
</p>
|
|
|
|
<div className="space-y-3">
|
|
<button
|
|
onClick={() => handleProfessionalChoice(true)}
|
|
className="w-full p-4 border-2 border-[#492E61] bg-[#492E61]/5 hover:bg-[#492E61]/10 rounded-xl transition-colors text-left group"
|
|
>
|
|
<h3 className="font-semibold text-[#492E61] mb-1">
|
|
Sou Profissional
|
|
</h3>
|
|
<p className="text-sm text-gray-600">
|
|
Cadastro para fotógrafos e cinegrafistas
|
|
</p>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => handleProfessionalChoice(false)}
|
|
className="w-full p-4 border-2 border-[#B9CF33] bg-[#B9CF33]/5 hover:bg-[#B9CF33]/10 rounded-xl transition-colors text-left group"
|
|
>
|
|
<h3 className="font-semibold text-[#492E61] mb-1">
|
|
Sou Cliente
|
|
</h3>
|
|
<p className="text-sm text-gray-600">
|
|
Cadastro para solicitar serviços
|
|
</p>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|