function MainComponent() { const [currentQuestion, setCurrentQuestion] = useState(0); const [answers, setAnswers] = useState({}); const [showResults, setShowResults] = useState(false); const [softSkills, setSoftSkills] = useState([]); const skillsData = { "Problem Solving": { description: "Capacità di identificare, analizzare e risolvere problemi in modo efficace", workExamples: "Gestione di progetti complessi, risoluzione di conflitti tecnici, ottimizzazione dei processi", lifeExamples: "Pianificazione di eventi, gestione del budget familiare, risoluzione di problemi domestici" }, "Comunicazione Efficace": { description: "Abilità di trasmettere idee e informazioni in modo chiaro e persuasivo", workExamples: "Presentazioni aziendali, gestione delle riunioni, scrittura di report", lifeExamples: "Mediazione in discussioni familiari, organizzazione di eventi sociali, networking" }, "Adattabilità": { description: "Flessibilità nel gestire cambiamenti e nuove situazioni con positività", workExamples: "Gestione di cambi organizzativi, apprendimento di nuove tecnologie, lavoro in ambienti dinamici", lifeExamples: "Adattamento a nuove città, gestione di imprevisti, apertura a nuove esperienze" }, "Leadership": { description: "Capacità di guidare e motivare gli altri verso obiettivi comuni", workExamples: "Gestione di team, mentoring di colleghi, guida di progetti", lifeExamples: "Organizzazione di attività di gruppo, guida in associazioni, mentoring informale" }, "Lavoro di Squadra": { description: "Capacità di collaborare efficacemente con gli altri per raggiungere obiettivi comuni", workExamples: "Partecipazione a progetti di gruppo, supporto ai colleghi, condivisione di conoscenze", lifeExamples: "Partecipazione ad attività sportive di squadra, volontariato, organizzazione eventi comunitari" } }; const questions = [ { text: "Come preferisci affrontare i problemi sul lavoro?", options: [ "Analizzo attentamente ogni dettaglio prima di agire", "Mi confronto con il team per trovare soluzioni collaborative", "Agisco rapidamente basandomi sull'intuito" ] }, { text: "In una discussione di gruppo, quale ruolo assumi naturalmente?", options: [ "Mediatore che cerca il compromesso", "Leader che guida la conversazione", "Osservatore che analizza tutte le prospettive" ] }, { text: "Come reagisci quando un progetto non va come previsto?", options: [ "Cerco subito soluzioni alternative", "Analizzo cosa è andato storto per imparare", "Coinvolgo il team per un confronto costruttivo" ] }, { text: "Come gestisci le scadenze strette?", options: [ "Creo un piano dettagliato e lo seguo rigorosamente", "Mi concentro sulle priorità e mi adatto al bisogno", "Collaboro con altri per distribuire il carico di lavoro" ] }, { text: "Quale approccio preferisci per imparare qualcosa di nuovo?", options: [ "Studio autonomamente attraverso ricerche approfondite", "Imparo facendo e sperimentando direttamente", "Seguo il mentoring di persone più esperte" ] }, { text: "Come ti comporti in situazioni di conflitto?", options: [ "Cerco di mediare tra le parti", "Affronto direttamente il problema", "Ascolto tutte le parti prima di intervenire" ] }, { text: "Come preferisci ricevere feedback sul tuo lavoro?", options: [ "Feedback dettagliato e strutturato", "Conversazione informale e diretta", "Mix di feedback scritto e verbale" ] }, { text: "Come organizzi il tuo lavoro quotidiano?", options: [ "Seguo una routine ben definita", "Mi adatto in base alle priorità del momento", "Alterno tra diversi compiti in base all'energia" ] }, { text: "Come reagisci ai cambiamenti improvvisi?", options: [ "Mi adatto rapidamente cercando opportunità", "Analizzo l'impatto prima di procedere", "Collaboro con altri per gestire la transizione" ] }, { text: "Quale aspetto del lavoro ti motiva di più?", options: [ "Raggiungere obiettivi sfidanti", "Collaborare con il team", "Imparare continuamente cose nuove" ] } ]; const calculateResults = ()=>{ const skills = [ "Problem Solving", "Comunicazione Efficace", "Adattabilità", "Leadership", "Lavoro di Squadra" ]; return skills.slice(0, 3); }; const handleAnswer = (answer)=>{ setAnswers({ ...answers, [currentQuestion]: answer }); if (currentQuestion < questions.length - 1) { setCurrentQuestion(currentQuestion + 1); } else { setSoftSkills(calculateResults()); setShowResults(true); } }; const handlePrevious = ()=>{ if (currentQuestion > 0) { setCurrentQuestion(currentQuestion - 1); } }; const resetQuiz = ()=>{ setCurrentQuestion(0); setAnswers({}); setShowResults(false); setSoftSkills([]); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#7f152b] p-4 md:p-8 font-josefin", __source: { fileName: "", lineNumber: 151, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 152, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white text-lg mb-8 text-center", __source: { fileName: "", lineNumber: 153, columnNumber: 9 }, __self: this }, "Scopri quali sono le tue competenze trasversali dominanti rispondendo a queste 10 domande. Segna la risposta che più ti rappresenta e alla fine del quiz scoprirai quali soft skill emergono dal tuo profilo!"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-[20px] p-8 shadow-lg", __source: { fileName: "", lineNumber: 158, columnNumber: 9 }, __self: this }, !showResults ? /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-600 mb-6", __source: { fileName: "", lineNumber: 161, columnNumber: 15 }, __self: this }, "Domanda ", currentQuestion + 1, "/", questions.length), /*#__PURE__*/ React.createElement("h2", { className: "text-xl md:text-2xl text-gray-800 mb-6", __source: { fileName: "", lineNumber: 165, columnNumber: 15 }, __self: this }, questions[currentQuestion].text), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 169, columnNumber: 15 }, __self: this }, questions[currentQuestion].options.map((option, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>handleAnswer(index), className: "w-full p-4 text-left border-2 border-[#7f152b] rounded-lg hover:bg-[#7f152b] hover:text-white transition-all duration-300 text-[#7f152b]", __source: { fileName: "", lineNumber: 171, columnNumber: 19 }, __self: this }, option))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-8", __source: { fileName: "", lineNumber: 183, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handlePrevious, disabled: currentQuestion === 0, className: `px-6 py-2 rounded-lg transition-all duration-300 ${currentQuestion === 0 ? 'bg-gray-200 text-gray-400' : 'bg-[#7f152b] text-white hover:bg-[#9f1935]'}`, __source: { fileName: "", lineNumber: 184, columnNumber: 17 }, __self: this }, "Indietro"))) : /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 197, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl text-[#7f152b] mb-8 text-center", __source: { fileName: "", lineNumber: 198, columnNumber: 15 }, __self: this }, "Ecco le Soft Skill che sembrano calzarti a pennello"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 202, columnNumber: 15 }, __self: this }, softSkills.map((skill, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-6 border border-[#7f152b] rounded-lg transition-all duration-300 hover:shadow-lg", __source: { fileName: "", lineNumber: 204, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl text-[#7f152b] mb-4 font-bold", __source: { fileName: "", lineNumber: 208, columnNumber: 21 }, __self: this }, skill), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 210, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 211, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-lg text-[#7f152b] mb-2 font-semibold", __source: { fileName: "", lineNumber: 212, columnNumber: 25 }, __self: this }, "Descrizione"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 213, columnNumber: 25 }, __self: this }, skillsData[skill].description)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 216, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-lg text-[#7f152b] mb-2 font-semibold", __source: { fileName: "", lineNumber: 217, columnNumber: 25 }, __self: this }, "Nel Lavoro"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 218, columnNumber: 25 }, __self: this }, skillsData[skill].workExamples)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 221, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-lg text-[#7f152b] mb-2 font-semibold", __source: { fileName: "", lineNumber: 222, columnNumber: 25 }, __self: this }, "Nella Vita Quotidiana"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 223, columnNumber: 25 }, __self: this }, skillsData[skill].lifeExamples)))))), /*#__PURE__*/ React.createElement("button", { onClick: resetQuiz, className: "w-full mt-8 p-4 bg-[#7f152b] text-white rounded-lg hover:bg-[#9f1935] transition-all duration-300", __source: { fileName: "", lineNumber: 230, columnNumber: 15 }, __self: this }, "Ricomincia il Quiz")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 242, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.3s ease-in-out; } `)); }