/*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-6 py-8", __source: { fileName: "", lineNumber: 1, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen", __source: { fileName: "", lineNumber: 2, columnNumber: 3 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-8", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-4 text-center text-purple-700", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "⚡ Tarot Card Reading"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-lg mb-8 text-center", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, "Choose your card and reveal its powerful interpretation."), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "cards", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, "Choose a card:"), /*#__PURE__*/ React.createElement("select", { id: "cards", className: "appearance-none border border-gray-300 bg-white py-3 px-4 rounded leading-tight focus:outline-none focus:shadow-outline w-full", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, "Card 1"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, "Card 2"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, "Card 3"))), /*#__PURE__*/ React.createElement("img", { src: "../public/images/tarot_card_sample.png", alt: "Selected Tarot Card Image", className: "w-full h-64 object-cover mb-8", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "interpretation", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "Your Card's Interpretation:"), /*#__PURE__*/ React.createElement("textarea", { id: "interpretation", className: "appearance-none border border-gray-300 bg-white py-3 px-4 rounded leading-tight focus:outline-none focus:shadow-outline w-full h-32", rows: "4", readOnly: true, __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-purple-700 hover:bg-purple-900 text-white font-bold py-3 px-4 rounded focus:outline-none focus:shadow-outline w-full text-center", type: "button", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-universal-access mr-2", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }), "Reveal Card Meaning"))));