function FramerMotion(props) { const [mounted, setMounted] = useState(false); const ref = useRef(null); useEffect(()=>{ const checkRef = setInterval(()=>{ if (window.Motion) { clearInterval(checkRef); } if (ref.current) { clearInterval(checkRef); window.React = React; const script = document.createElement("script"); script.src = "https://cdn.jsdelivr.net/npm/framer-motion@11.11.17/dist/framer-motion.min.js"; script.type = "module"; script.onload = ()=>{ setMounted(true); }; ref.current.appendChild(script); } }, 100); return ()=>{ clearInterval(checkRef); if (ref.current) { const script = ref.current.querySelector("script"); if (script) { ref.current.removeChild(script); } } delete window.motion; }; }, []); const mountElm = /*#__PURE__*/ React.createElement("div", { className: "hidden", ref: ref, __source: { fileName: "", lineNumber: 35, columnNumber: 20 }, __self: this }); return mounted ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(window.Motion.motion.div, { ...props, __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }), mountElm) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { ...props, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }), mountElm); } function FramerMotionStory() { return /*#__PURE__*/ React.createElement(FramerMotion, { __source: { fileName: "", lineNumber: 50, columnNumber: 10 }, __self: this }); } function MainComponent() { const [currentQuestion, setCurrentQuestion] = useState(0); const [score, setScore] = useState(0); const [lives, setLives] = useState(3); const [selectedAnswer, setSelectedAnswer] = useState(null); const [showExplanation, setShowExplanation] = useState(false); const [isComplete, setIsComplete] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false); const questions = [ { question: "Qual é o maior órgão do corpo humano?", options: [ "Fígado", "Pele", "Intestino", "Pulmões" ], correct: 1, explanation: "A pele é o maior órgão do corpo humano, cobrindo uma área de aproximadamente 2 metros quadrados em um adulto médio." }, { question: "Quantos elementos químicos existem na tabela periódica?", options: [ "92", "108", "118", "126" ], correct: 2, explanation: "A tabela periódica moderna contém 118 elementos químicos, com o último sendo adicionado oficialmente em 2015." }, { question: "Qual é a velocidade da luz no vácuo?", options: [ "299.792 km/s", "199.792 km/s", "399.792 km/s", "499.792 km/s" ], correct: 0, explanation: "A velocidade da luz no vácuo é aproximadamente 299.792 quilômetros por segundo, uma constante fundamental da física." } ]; const handleAnswer = (index)=>{ setSelectedAnswer(index); if (index === questions[currentQuestion].correct) { setScore(score + 1); } else { setLives(lives - 1); if (lives <= 1) { setIsComplete(true); } } }; const handleNext = ()=>{ if (currentQuestion < questions.length - 1) { setCurrentQuestion(currentQuestion + 1); setSelectedAnswer(null); setShowExplanation(false); } else { setIsComplete(true); } }; const handlePrevious = ()=>{ if (currentQuestion > 0) { setCurrentQuestion(currentQuestion - 1); setSelectedAnswer(null); setShowExplanation(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1B1B1B] flex flex-col", __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "fixed top-0 left-0 right-0 bg-[#1B1B1B] border-b border-[#4B4B4B] z-50", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-8 py-6 flex justify-between items-center", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-[#DFFF4E] font-inter-tight-medium text-2xl hover:text-[#F6F6F6]", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Barton Werner"), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex space-x-8", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-[#B1B1B1] hover:text-[#DFFF4E] font-inter-tight-regular", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Gallery"), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "text-[#B1B1B1] hover:text-[#DFFF4E] font-inter-tight-regular", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "text-[#B1B1B1] hover:text-[#DFFF4E] font-inter-tight-regular", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "Contact")), /*#__PURE__*/ React.createElement("button", { className: "md:hidden text-[#DFFF4E]", onClick: ()=>setIsMenuOpen(!isMenuOpen), __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isMenuOpen ? "fa-times" : "fa-bars"}`, __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }))), isMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "md:hidden bg-[#1B1B1B] border-t border-[#4B4B4B] px-8 py-4", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "block py-2 text-[#B1B1B1] hover:text-[#DFFF4E] font-inter-tight-regular", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, "Gallery"), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "block py-2 text-[#B1B1B1] hover:text-[#DFFF4E] font-inter-tight-regular", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "block py-2 text-[#B1B1B1] hover:text-[#DFFF4E] font-inter-tight-regular", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, "Contact"))), /*#__PURE__*/ React.createElement("div", { className: "pt-[100px] md:pt-[160px] px-4 md:px-8 flex-grow", __source: { fileName: "", lineNumber: 124, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, !isComplete ? /*#__PURE__*/ React.createElement("div", { className: "bg-[#2C2C2C] rounded-lg p-8", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this }, [ ...Array(lives) ].map((_, i)=>/*#__PURE__*/ React.createElement("i", { key: i, className: "fas fa-heart text-[#DFFF4E] text-2xl", __source: { fileName: "", lineNumber: 131, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "text-[#DFFF4E] font-inter-tight-medium", __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }, "Pontuação: ", score)), /*#__PURE__*/ React.createElement("h2", { className: "text-[#F6F6F6] font-inter-tight-medium text-2xl mb-6", __source: { fileName: "", lineNumber: 142, columnNumber: 15 }, __self: this }, questions[currentQuestion].question), /*#__PURE__*/ React.createElement("div", { className: "space-y-4 mb-8", __source: { fileName: "", lineNumber: 146, columnNumber: 15 }, __self: this }, questions[currentQuestion].options.map((option, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>handleAnswer(index), className: `w-full p-4 rounded text-left transition-colors duration-300 ${selectedAnswer === index ? selectedAnswer === questions[currentQuestion].correct ? "bg-[#DFFF4E] text-[#1B1B1B]" : "bg-[#FF4E4E] text-[#F6F6F6]" : "bg-[#1B1B1B] text-[#F6F6F6] hover:bg-[#4B4B4B]"}`, __source: { fileName: "", lineNumber: 148, columnNumber: 19 }, __self: this }, option))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 164, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handlePrevious, disabled: currentQuestion === 0, className: "px-6 py-3 bg-[#2C2C2C] text-[#F6F6F6] border border-[#4B4B4B] rounded disabled:opacity-50", __source: { fileName: "", lineNumber: 165, columnNumber: 17 }, __self: this }, "Anterior"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowExplanation(!showExplanation), className: "px-6 py-3 bg-[#2C2C2C] text-[#F6F6F6] border border-[#4B4B4B] rounded", __source: { fileName: "", lineNumber: 172, columnNumber: 17 }, __self: this }, showExplanation ? "Ocultar" : "Mostrar", " Explicação"), /*#__PURE__*/ React.createElement("button", { onClick: handleNext, className: "px-6 py-3 bg-[#DFFF4E] text-[#1B1B1B] rounded hover:bg-[#2C2C2C] hover:text-[#F6F6F6]", __source: { fileName: "", lineNumber: 178, columnNumber: 17 }, __self: this }, "Próximo")), showExplanation && /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 bg-[#1B1B1B] rounded", __source: { fileName: "", lineNumber: 187, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular", __source: { fileName: "", lineNumber: 188, columnNumber: 19 }, __self: this }, questions[currentQuestion].explanation))) : /*#__PURE__*/ React.createElement(FramerMotion, { className: "bg-[#2C2C2C] rounded-lg p-8 text-center", initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { duration: 0.5 }, __source: { fileName: "", lineNumber: 195, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/05f649bf-b70b-4cf8-90f7-2588ce404a08/-/format/auto/", alt: "Personagem coruja 3D parabenizando o jogador", className: "w-48 h-48 mx-auto mb-6", __source: { fileName: "", lineNumber: 201, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-[#F6F6F6] font-inter-tight-medium text-3xl mb-4", __source: { fileName: "", lineNumber: 206, columnNumber: 15 }, __self: this }, "Quiz Completo!"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular text-xl mb-6", __source: { fileName: "", lineNumber: 209, columnNumber: 15 }, __self: this }, "Pontuação Final: ", score, " / ", questions.length), /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.reload(), className: "px-8 py-4 bg-[#DFFF4E] text-[#1B1B1B] rounded hover:bg-[#2C2C2C] hover:text-[#F6F6F6]", __source: { fileName: "", lineNumber: 212, columnNumber: 15 }, __self: this }, "Tentar Novamente")))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1B1B1B] border-t border-[#4B4B4B] py-8 md:py-12", __source: { fileName: "", lineNumber: 222, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4 md:px-8", __source: { fileName: "", lineNumber: 223, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8", __source: { fileName: "", lineNumber: 224, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center md:text-left", __source: { fileName: "", lineNumber: 225, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[#DFFF4E] font-inter-tight-medium text-xl mb-3 md:mb-4", __source: { fileName: "", lineNumber: 226, columnNumber: 15 }, __self: this }, "Contact"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular", __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }, "info@bartonwerner.com"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular", __source: { fileName: "", lineNumber: 232, columnNumber: 15 }, __self: this }, "+1 (555) 123-4567")), /*#__PURE__*/ React.createElement("div", { className: "text-center md:text-left", __source: { fileName: "", lineNumber: 236, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[#DFFF4E] font-inter-tight-medium text-xl mb-3 md:mb-4", __source: { fileName: "", lineNumber: 237, columnNumber: 15 }, __self: this }, "Follow"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center md:justify-start space-x-6", __source: { fileName: "", lineNumber: 240, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.instagram.com/create_xyz/", target: "_blank", rel: "noopener noreferrer", className: "text-[#B1B1B1] hover:text-[#DFFF4E]", __source: { fileName: "", lineNumber: 241, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram text-2xl", __source: { fileName: "", lineNumber: 247, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://x.com/create_xyz", target: "_blank", rel: "noopener noreferrer", className: "text-[#B1B1B1] hover:text-[#DFFF4E]", __source: { fileName: "", lineNumber: 249, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter text-2xl", __source: { fileName: "", lineNumber: 255, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://www.youtube.com/@createdotxyz", target: "_blank", rel: "noopener noreferrer", className: "text-[#B1B1B1] hover:text-[#DFFF4E]", __source: { fileName: "", lineNumber: 257, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-youtube text-2xl", __source: { fileName: "", lineNumber: 263, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "text-center md:text-left", __source: { fileName: "", lineNumber: 267, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[#DFFF4E] font-inter-tight-medium text-xl mb-3 md:mb-4", __source: { fileName: "", lineNumber: 268, columnNumber: 15 }, __self: this }, "Location"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular", __source: { fileName: "", lineNumber: 271, columnNumber: 15 }, __self: this }, "San Francisco, CA"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular", __source: { fileName: "", lineNumber: 274, columnNumber: 15 }, __self: this }, "United States"))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 md:mt-12 text-center", __source: { fileName: "", lineNumber: 279, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular text-sm md:text-base", __source: { fileName: "", lineNumber: 280, columnNumber: 13 }, __self: this }, "© 2024 Barton Werner. All rights reserved."))))); }