function MainComponent() { const buttonLabel = 'Download Tracks'; const handleSubmit = (event)=>{ event.preventDefault(); // Submit logic here }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#050505] text-white p-4", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold font-roboto mb-12", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, "🎶 DJ Beat Downloads"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-xl", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-3 mb-6 md:mb-0", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-xs font-bold mb-2", htmlFor: "grid-first-name", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, "DJ Name"), /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-[#1e1e1e] text-gray-300 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-[#2e2e2e]", id: "grid-first-name", type: "text", placeholder: "DJ Cool", name: "dj_name", required: true, __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-3", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-xs font-bold mb-2", htmlFor: "grid-last-name", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, "Genre"), /*#__PURE__*/ React.createElement("select", { className: "block w-full bg-[#1e1e1e] text-gray-300 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-[#2e2e2e]", id: "grid-genre", name: "genre", required: true, __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, "Select Genre"), /*#__PURE__*/ React.createElement("option", { value: "hiphop", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, "Hip-Hop"), /*#__PURE__*/ React.createElement("option", { value: "electronic", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, "Electronic"), /*#__PURE__*/ React.createElement("option", { value: "jazz", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, "Jazz"), /*#__PURE__*/ React.createElement("option", { value: "rock", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, "Rock")))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-xs font-bold mb-2", htmlFor: "grid-email", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "Email Address"), /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-[#1e1e1e] text-gray-300 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-[#2e2e2e]", id: "grid-email", type: "email", placeholder: "dj@example.com", name: "email", required: true, __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-2", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3 text-center", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-600 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded w-full transform transition duration-300 ease-in-out hover:scale-105", type: "submit", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }), buttonLabel)))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, ` body { font-family: 'Roboto', sans-serif; } @keyframes scale-up { 0% { transform: scale(1); } 100% { transform: scale(1.05); } } button:hover { animation: scale-up 0.3s ease-in-out forwards; } `)); }