function MainComponent() { const [enrollmentDialogOpen, setEnrollmentDialogOpen] = React.useState(false); const [currentTab, setCurrentTab] = React.useState('enroll'); const openEnrollmentDialog = ()=>{ setEnrollmentDialogOpen(true); setCurrentTab('enroll'); }; const openReportsDialog = ()=>{ setEnrollmentDialogOpen(true); setCurrentTab('reports'); }; const closeDialog = ()=>{ setEnrollmentDialogOpen(false); }; const dialogContent = { enroll: /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border rounded-md", type: "text", placeholder: "Full Name", name: "fullName", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border rounded-md", type: "email", placeholder: "Email", name: "email", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 border rounded-md", placeholder: "Chess experience (if any)", name: "experience", rows: "4", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "px-6 py-2 bg-[#0369a1] text-white rounded-md hover:bg-[#0284c7] w-full", type: "submit", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Submit Enrollment")), reports: /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg mb-4 text-[#121212]", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "Student Reports"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#424242] mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Check out the progress reports of our students."), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#10b981] text-white font-roboto rounded-md block mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "View Reports"), /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg mb-4 text-[#121212]", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "Presenting Chess Strategies"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#424242] mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Watch the latest strategic presentations from our advanced students."), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#ec4899] text-white font-roboto rounded-md block", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "Watch Presentations")) }; const enrollmentDialog = enrollmentDialogOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-[#00000080] flex justify-center items-center", __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-lg w-full max-w-[500px]", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-4 text-[#121212]", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, currentTab === 'enroll' ? 'Enroll in Chess Coaching' : 'Students & Presentations'), dialogContent[currentTab], /*#__PURE__*/ React.createElement("button", { className: "absolute top-3 right-3 text-[#363636]", onClick: closeDialog, __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "❌"))); const renderMainContent = /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#f7f7f7] h-screen flex flex-col", __source: { fileName: "", lineNumber: 83, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-4 bg-[#fdfdfd] shadow-md", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl text-[#121212]", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, "ChessNut Academy"), /*#__PURE__*/ React.createElement("div", { className: "space-x-2", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#10b981] text-white font-roboto rounded-md hover:bg-[#059669]", onClick: openEnrollmentDialog, __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "Enroll Now"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#f59e0b] text-white font-roboto rounded-md hover:bg-[#d97706]", onClick: openReportsDialog, __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "Reports & Presentations"))), /*#__PURE__*/ React.createElement("main", { className: "mt-8 flex-1", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl mb-4 text-[#121212]", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, "Improve Your Chess Game"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-md mb-4 text-[#424242]", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, "Join our coaching sessions to master the strategies that will elevate your skills."), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-2", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, [ 'Beginner', 'Intermediate', 'Advanced' ].map((level)=>/*#__PURE__*/ React.createElement("div", { key: level, className: "w-full sm:w-1/2 lg:w-1/3 px-2 mb-4", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-lg shadow-lg p-6 bg-white", __source: { fileName: "", lineNumber: 110, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl text-[#121212]", __source: { fileName: "", lineNumber: 111, columnNumber: 19 }, __self: this }, level, " Coaching"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#646464] mb-4", __source: { fileName: "", lineNumber: 112, columnNumber: 19 }, __self: this }, "Tailored sessions to boost your confidence across the board."), /*#__PURE__*/ React.createElement("img", { src: `./chess-${level.toLowerCase()}.jpg`, alt: `${level} level chess coaching session`, className: "w-full h-[200px] object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 115, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#64748b] text-white rounded-md hover:bg-[#475569] w-full", onClick: openEnrollmentDialog, __source: { fileName: "", lineNumber: 120, columnNumber: 19 }, __self: this }, "Join Now")))))))); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 136, columnNumber: 5 }, __self: this }, renderMainContent, enrollmentDialog, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 139, columnNumber: 7 }, __self: this }, ` @media (max-width: 640px) { .sm\\:w-1\\/2 { width: 100% !important; } } @media (min-width: 1024px) { .lg\\:w-1\\/3 { width: 33.333333% !important; } } `)); }

Improve Your Chess Game

Beginner Coaching

Intermediate Coaching

Advanced Coaching