/*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-gray-100", __source: { fileName: "", lineNumber: 1, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md px-8 py-12 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 2, columnNumber: 3 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-4 text-2xl font-bold text-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "Enter Your Credit Card Details"), /*#__PURE__*/ React.createElement("form", { className: "grid grid-cols-1 gap-6", __source: { fileName: "", lineNumber: 4, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-medium text-gray-700", htmlFor: "cardNumber", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, "Card Number"), /*#__PURE__*/ React.createElement("input", { className: "block w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm", id: "cardNumber", type: "tel", inputMode: "numeric", autoComplete: "cc-number", pattern: "\\d{4}[\\s]\\d{4}[\\s]\\d{4}[\\s]\\d{4}", placeholder: "Enter card number", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-medium text-gray-700", htmlFor: "expiryDate", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "Expiry Date"), /*#__PURE__*/ React.createElement("input", { className: "block w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm", id: "expiryDate", type: "tel", inputMode: "numeric", pattern: "(0[1-9]|1[0-2])/[0-9]{2}", placeholder: "Enter expiry date (MM/YY)", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-medium text-gray-700", htmlFor: "cvv", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "CVV"), /*#__PURE__*/ React.createElement("input", { className: "block w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm", id: "cvv", type: "tel", inputMode: "numeric", pattern: "\\d{3}", placeholder: "Enter CVV", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-full px-4 py-2 text-sm font-medium text-white bg-blue-500 border border-transparent rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", type: "submit", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "Proceed to Next Page")))));