import { useState, useEffect } from 'react'; export default function App() { const [darkMode, setDarkMode] = useState(false); const [activeTab, setActiveTab] = useState('login'); const [formData, setFormData] = useState({ email: '', password: '', name: '', phone: '', acceptTerms: false, }); // Toggle dark mode useEffect(() => { if (darkMode) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } }, [darkMode]); const handleChange = (e) => { const { name, value, type, checked } = e.target; setFormData((prev) => ({ ...prev, [name]: type === 'checkbox' ? checked : value, })); }; const handleSubmit = (e) => { e.preventDefault(); // Simulate login or registration alert(`${activeTab === 'login' ? 'Login' : 'Registration'} submitted`); }; return (

{/* Header */}

Painel de Gravação

{/* Main Content */}

{/* Left Side - Background Image / Info */}

Bem-vindo ao Painel de Gravação

Conectamos você a profissionais de locução altamente qualificados.

Gravações profissionais
Edição e finalização
Entrega rápida

{/* Right Side - Auth Form */}

{/* Login Form */} {activeTab === 'login' && ( )} {/* Register Form */} {activeTab === 'register' && (

Nome completo

Email

Telefone

Senha

Aceito os{' '} Termos de Uso {' '} e a{' '} Política de Privacidade

)} {/* Footer Links */}

Termos de Uso Política de Privacidade

); } // Icons function MoonIcon({ className }) { return ( ); } function SunIcon({ className }) { return ( ); } function CheckIcon({ className }) { return ( ); }